import { StackScreenProps } from '@react-navigation/stack';
import * as React from 'react';
import {
  Div,
  Button,
  Image,
  Text,
  Avatar,
  Radio,
  RadioGroup,
  Input,
} from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { useTranslation } from 'react-i18next';
import { useMap, useCreation } from 'ahooks';
import useModel from 'flooks';
import Login from './model';
import User from '../stores/User';

import ImagePicker from '../components/ImagePicker';
import { connect } from '../utils/SystemUtils';

import { RiderMap } from '../utils/RiderInfoUtils';

export default function TransportationScreen({ navigation }: StackScreenProps) {
  const { t } = useTranslation();

  const [transport, setTransport] = React.useState<string>('');
  const [extra, setExtra] = React.useState<string>('');
  const { riderApplyPre } = useModel(Login, []);

  const { riderInfo } = useModel(User, ['riderInfo']);

  const [transportationImgMap, transportationImgMapEvent] = useMap<
    string,
    string
  >([
    ['正面', ''],
    ['侧面', ''],
  ]);

  const [driverLicense, setDriverLicense] = React.useState<boolean>(false);

  const [driverLicenseImgMap, driverLicenseImgEvent] = useMap<string, string>([
    ['正面', ''],
    ['背面', ''],
  ]);
  const canSubmit = useCreation(() => {
    if (
      transport === '没有' ||
      (transport &&
        transportationImgMapEvent.get('正面') &&
        transportationImgMapEvent.get('侧面') &&
        (!driverLicense ||
          (driverLicense &&
            driverLicenseImgEvent.get('正面') &&
            driverLicenseImgEvent.get('背面'))))
    ) {
      return true;
    } else {
      return false;
    }
  }, [
    transport,
    extra,
    transportationImgMap,
    driverLicense,
    driverLicenseImgMap,
  ]);

  React.useEffect(() => {
    if (riderInfo && riderInfo.id) {
      const keys = [...RiderMap.keys()];
      if (keys.includes(riderInfo.transportation)) {
        setTransport(riderInfo.transportation);
      } else {
        setTransport('其他');
        setExtra(riderInfo.transportation.replace(/其他/, ''));
      }
      if (riderInfo.transportationImg) {
        transportationImgMapEvent.setAll([
          ['正面', riderInfo.transportationImg.split(',')[0]],
          ['侧面', riderInfo.transportationImg.split(',')[1]],
        ]);
      }
      if (riderInfo.driverLicenseImg) {
        setDriverLicense(true);
        driverLicenseImgEvent.setAll([
          ['正面', riderInfo.driverLicenseImg.split(',')[0]],
          ['背面', riderInfo.driverLicenseImg.split(',')[1]],
        ]);
      }
    }
  }, [riderInfo]);

  return (
    <Div bg="gray100" flex={1}>
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#fff',
        }}
      >
        <Div borderTopWidth={10} borderColor="gray100" px={15}>
          <Div row py={10} overflow="hidden">
            <Text w={120} textAlign="left">
              {t('song-can-jiao-tong-gong-ju')}：
            </Text>
            <RadioGroup
              value={transport}
              onChange={(value: any) => {
                if (value !== '其他') {
                  setExtra('');
                }
                setTransport(value);
              }}
              flexDir="row"
              flexWrap="wrap"
              flex={1}
            >
              {[...RiderMap.keys()].map((item, index) => {
                let info = RiderMap.get(item);
                return (
                  <Radio
                    value={item}
                    key={index}
                    activeColor="yellow500"
                    inactiveColor="gray300"
                    pr={20}
                    my={5}
                  >
                    <Text ml={6} color="gray300">
                      {t(info.name)}
                    </Text>

                    {info.hasInput && (
                      <Input
                        w={96}
                        h={25}
                        opacity={1}
                        loaderColor="gray400"
                        color="gray900"
                        fontSize="sm"
                        value={extra}
                        onChangeText={setExtra}
                        onFocus={() => {
                          setTransport(item);
                        }}
                        ml={5}
                        bg="gray100"
                      />
                    )}
                  </Radio>
                );
              })}
            </RadioGroup>
          </Div>
          {transport != '' && transport != '没有' && (
            <>
              <Div row py={10} overflow="hidden">
                <Text w={120} textAlign="left">
                  {t('jiao-tong-gong-ju-zhao-pian')}：
                </Text>
                <Div flex={1} row pt={30}>
                  {[...transportationImgMap.keys()].map((item, index) => {
                    return (
                      <Div w="50%" key={index} alignItems="center">
                        <ImagePicker
                          img={transportationImgMapEvent.get(item)}
                          setImg={(img) =>
                            transportationImgMapEvent.set(item, img)
                          }
                        />
                      </Div>
                    );
                  })}
                </Div>
              </Div>
              <Div row py={10} overflow="hidden">
                <Text w={120} textAlign="left">
                  {t('you-wu-jia-shi-zheng')}：
                </Text>
                <RadioGroup
                  value={driverLicense}
                  onChange={(value: any) => setDriverLicense(value)}
                  flexDir="row"
                  flexWrap="wrap"
                  flex={1}
                >
                  <Radio
                    value={true}
                    activeColor="yellow500"
                    inactiveColor="gray300"
                    pr={20}
                    my={5}
                  >
                    <Text ml={6} color="gray300">
                      {t('you')}
                    </Text>
                  </Radio>
                  <Radio
                    value={false}
                    activeColor="yellow500"
                    inactiveColor="gray300"
                    pr={20}
                    my={5}
                  >
                    <Text ml={6} color="gray300">
                      {t('mei-you')}
                    </Text>
                  </Radio>
                </RadioGroup>
              </Div>
              {driverLicense && (
                <Div row py={10} overflow="hidden">
                  <Text w={120} textAlign="left">
                    {t('jia-shi-zheng-zheng-fan-mian')}：
                  </Text>
                  <Div flex={1} row pt={30}>
                    {[...driverLicenseImgMap.keys()].map((item, index) => {
                      return (
                        <Div w="50%" key={index} alignItems="center">
                          <ImagePicker
                            img={driverLicenseImgEvent.get(item)}
                            setImg={(img) =>
                              driverLicenseImgEvent.set(item, img)
                            }
                          />
                          <Text>{item}</Text>
                        </Div>
                      );
                    })}
                  </Div>
                </Div>
              )}
            </>
          )}
          <Button
            w={112}
            bg="yellow500"
            alignSelf="center"
            fontSize="sm"
            my={20}
            disabled={!canSubmit}
            onPress={() => {
              riderApplyPre(
                transport + extra,
                transportationImgMapEvent.get('正面') +
                  ',' +
                  transportationImgMapEvent.get('侧面'),
                driverLicense
                  ? driverLicenseImgEvent.get('正面') +
                      ',' +
                      driverLicenseImgEvent.get('背面')
                  : ''
              );
              navigation.navigate('ApplyLocation');
            }}
          >
            {t('xia-yi-bu')}
          </Button>

          <Button
            w={112}
            color="yellow500"
            bg="none"
            borderColor="gray100"
            borderWidth={1}
            alignSelf="center"
            fontSize="sm"
            my={20}
            onPress={() => connect(navigation)}
          >
            {t('lian-xi-ke-fu')}
          </Button>
        </Div>
      </ScrollView>
    </Div>
  );
}