import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Text, Icon } from 'react-native-magnus';

import { Modal, Portal } from 'react-native-paper';
import { useTranslation } from 'react-i18next';
import useModel from 'flooks';
import Detail from '../Detail/model';

const payMap = new Map([
  [
    'ALI_PAY',
    {
      name: '支付宝',
      icon: 'alipay-square',
      iconColor: 'blue500',
    },
  ],
  [
    'CASH_DELIVERY',
    {
      name: '货到付款',
      icon: 'wallet',
      iconColor: 'green500',
    },
  ],
  [
    'CREDIT_CARD',
    {
      name: '信用卡',
      icon: 'creditcard',
      iconColor: 'red500',
    },
  ],
]);

const PayImtem = ({ mapKey, isChoose, changePay }) => {
  const info = payMap.get(mapKey);
  return (
    <>
      <Div h={1} bg="gray200" />
      <Button block bg="white" p="none" onPress={() => changePay(mapKey)}>
        <Div row flex={1} alignItems="center" h={54}>
          <Icon name={info.icon} color={info.iconColor} fontSize="5xl" />
          <Text textAlign="left" flex={1} ml={20}>
            {info.name}
          </Text>

          <Icon
            name="checkcircle"
            color={isChoose ? 'brand500' : 'gray200'}
            size={16}
          />
        </Div>
      </Button>
    </>
  );
};

export default function PayCom() {
  const { t } = useTranslation();
  const [visible, changeVisible] = React.useState(false);
  const { payMethod, merchantInfo, changePay } = useModel(Detail, [
    'payMethod',
    'merchantInfo',
  ]);

  const { showName } = merchantInfo;
  return (
    <>
      <Button block bg="white" p="none" onPress={() => changeVisible(true)}>
        <Div row flex={1} alignItems="center" h={40}>
          <Text fontSize="xl" textAlign="left">
            {t('zhi-fu-fang-shi')}
          </Text>
          <Div flex={1} />
          <Text color="brand500" fontSize="xl" mr={5} textAlign="left">
            {payMap.has(payMethod)
              ? payMap.get(payMethod).name
              : t('qing-xuan-ze')}
          </Text>
          <Icon name="right" color="#000" />
        </Div>
      </Button>

      <Portal>
        <Modal
          visible={visible}
          onDismiss={() => changeVisible(false)}
          contentContainerStyle={{
            position: 'absolute',
            left: 0,
            right: 0,
            bottom: 0,
            maxHeight: '70%',
            zIndex: 2,
            justifyContent: 'flex-end',
          }}
        >
          <Div bg="white" px={15} mt={56} pb={80}>
            <Div py={15}>
              <Text textAlign="center">{showName}</Text>
            </Div>
            {[...payMap.keys()].map((item) => {
              return (
                <PayImtem
                  key={item}
                  mapKey={item}
                  isChoose={item === payMethod}
                  changePay={(method) => {
                    changePay(method);
                    changeVisible(false);
                  }}
                />
              );
            })}
          </Div>
        </Modal>
      </Portal>
    </>
  );
}