import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Div, Button, Image, Text, Avatar, Tag } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';
import { TextareaItem } from '@ant-design/react-native';
import { useTranslation } from 'react-i18next';
import { useSet, useCreation } from '@umijs/hooks';
import useModel from 'flooks';
import Detail from '../Detail/model'; // detail模块通用方法

import Header from '../../components/Header';

const messages = ['饮料不加冰', '不要辣'];

export default function OrderMessageScreen({ navigation }) {
  const { t } = useTranslation();
  const { remark, setRemark } = useModel(Detail, ['remark']);

  const [message, setmessage] = React.useState('');

  const [chooseTab, tabEvent] = useSet([]);

  const cansubmit = useCreation(() => {
    if (message || chooseTab.size > 0) {
      return true;
    } else {
      return false;
    }
  }, [message, chooseTab]);

  return (
    <>
      <Header title={t('ding-dan-bei-zhu')} />
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          backgroundColor: '#eee',
        }}
      >
        <Div py={20} px={15} bg="white" mt={5}>
          <TextareaItem
            defaultValue={remark}
            rows={4}
            placeholder={t('keewai-tian-xie-ding-dan-bei-zhu')}
            style={{
              backgroundColor: '#eeeeee',
              paddingVertical: 10,
              fontSize: 10,
              borderBottomWidth: 0,
            }}
            count={100}
            onChange={setmessage}
          />

          <Text textAlign="left" fontSize="xs" color="gray300" py={10}>
            {t('chang-yong-biao-qian')}
          </Text>

          <Div row>
            {messages.map((item, index) => {
              const isChoose = tabEvent.has(item);
              return (
                <Tag
                  key={index}
                  bg={isChoose ? 'brand500' : 'white'}
                  color={isChoose ? 'white' : 'gray300'}
                  borderColor={isChoose ? 'brand500' : 'gray300'}
                  borderWidth={1}
                  ml={5}
                  mt={5}
                  fontSize="sm"
                  rounded={3}
                  onPress={() => {
                    if (isChoose) {
                      tabEvent.remove(item);
                    } else {
                      tabEvent.add(item);
                    }
                  }}
                >
                  {item}
                </Tag>
              );
            })}
          </Div>
        </Div>

        <Button
          mx={20}
          my={10}
          bg="brand500"
          block
          disabled={!cansubmit}
          onPress={() => {
            setRemark(message, chooseTab);

            navigation.goBack();
          }}
        >
          {t('ti-jiao')}
        </Button>
      </ScrollView>
    </>
  );
}