import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Toggle } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import useModel from 'flooks';
import User from '../stores/User';

import request from '../utils/RequestUtils';
import { toastShow, toastInfo, toastSuccess } from '../utils/SystemUtils';
import { useTranslation } from 'react-i18next';

export default function SettingSysScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();
  const { riderInfo, setRider } = useModel(User, ['riderInfo']);
  const {
    newNews,
    newOrderTone,
    reminderTone,
    chatMessageReminder,
  } = riderInfo;

  function saveRider(key, val) {
    toastShow();
    request
      .post('/rider/save', {
        data: {
          id: riderInfo.id,
          [key]: val,
        },
      })
      .then((res) => {
        toastSuccess(t('she-zhi-cheng-gong'));
        setRider(res);
      })
      .catch((e) => {
        toastInfo(e.error);
      });
  }

  return (
    <Div bg="gray100">
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#f2f2f2',
        }}
      >
        <Div
          h={60}
          alignItems="center"
          justifyContent="space-between"
          mt={10}
          bg="white"
          row
          px={14}
        >
          <Text fontSize="sm">{t('xin-xiao-xi-tong-zhi')}</Text>
          <Toggle
            on={newNews}
            onPress={() => {
              saveRider('newNews', !newNews);
            }}
            bg="gray200"
            circleBg="white"
            activeBg="yellow500"
            h={30}
            w={60}
          />
        </Div>
        <Div bg="white" px={14} py={10} my={10}>
          <Div row alignItems="center" justifyContent="space-between" py={10}>
            <Text fontSize="sm">{t('xin-dan-ti-shi-yin')}</Text>
            <Toggle
              on={newOrderTone}
              onPress={() => {
                saveRider('newOrderTone', !newOrderTone);
              }}
              bg="gray200"
              circleBg="white"
              activeBg="yellow500"
              h={30}
              w={60}
            />
          </Div>
          <Div row alignItems="center" justifyContent="space-between" py={10}>
            <Text fontSize="sm">{t('cui-dan-ti-shi-yin')}</Text>
            <Toggle
              on={reminderTone}
              onPress={() => {
                saveRider('reminderTone', !reminderTone);
              }}
              bg="gray200"
              circleBg="white"
              activeBg="yellow500"
              h={30}
              w={60}
            />
          </Div>
          <Div row alignItems="center" justifyContent="space-between" py={10}>
            <Text fontSize="sm">{t('liao-tian-xiao-xi-ti-xing')}</Text>
            <Toggle
              on={chatMessageReminder}
              onPress={() => {
                saveRider('chatMessageReminder', !chatMessageReminder);
              }}
              bg="gray200"
              circleBg="white"
              activeBg="yellow500"
              h={30}
              w={60}
            />
          </Div>
        </Div>
      </ScrollView>
    </Div>
  );
}