/* eslint-disable react/destructuring-assignment */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { useModel } from "flooks";
import { Layout, Input, Button, Text } from "@ui-kitten/components";
import { StyleSheet } from "react-native";
import ScrollPage from "../../components/ScrollPage";

const styles = StyleSheet.create({
    lay: {
        flex: 1,
        marginTop: 10,
        paddingVertical: 20,
    },
    item: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: 7,
        alignSelf: "stretch",
    },
    lab: {
        width: 119,
        textAlign: "right",
        marginRight: 38,
        flexShrink: 0,
    },
    tip: {
        width: 86,
        paddingHorizontal: 8,
        flexShrink: 0,
    },
    input: {
        flexShrink: 1,
        minWidth: 0,
    },
    btn: {
        marginTop: 50,
        marginBottom: 20,
        alignSelf: "center",
    },
    bottom: {
        paddingHorizontal: 70,
    },
});

// 配送设置
export default function DistributionScreen({ navigation }) {
    const {
        distributionTitle,
        minutes,
        distributionText1,
        distributionText2,
        distributionText3,
        distributionText4,
        distributionText5,
        distributionText6,
        yuan,
        confirm,
    } = useModel("wordsModel");

    const {
        startingAmount,
        preparationTime,
        updateMerchant,
    } = useModel("userModel");
    const { success } = useModel("loadingModel");

    const [amount, setAmount] = React.useState();
    const [time, setTime] = React.useState();

    React.useEffect(() => {
        if (startingAmount) {
            setAmount(startingAmount);
        }
        if (preparationTime) {
            setTime(preparationTime);
        }
    }, [startingAmount, preparationTime]);

    const Lable = props => (
      <Text category='c1' style={styles.lab}>
        {props.children}
      </Text>
    );
    const Tip = props => (
      <Text category='c1' status='info' style={styles.tip}>
        {props.children}
      </Text>
    );

    const canSubmit = React.useMemo(() => {
        if (amount && time) {
            return true;
        } 
            return false;
        
    }, [amount, time]);

    return (
      <ScrollPage statusType='primary' navHeaderBarTitle={distributionTitle}>
        <Layout style={styles.lay}>
          <Layout style={styles.item}>
            <Lable>{distributionText1}</Lable>
            <Input
              value={amount}
              onChangeText={text => {
                            setAmount(text);
                        }}
              key={2}
              keyboardType='numeric'
              maxLength={3}
              placeholder={distributionText3}
              style={styles.input}
            />
            <Tip>
              (0-100
              {yuan}
              )
            </Tip>
          </Layout>
          <Layout style={styles.item}>
            <Lable>{distributionText2}</Lable>
            <Input
              value={time}
              key={1}
              onChangeText={text => {
                            setTime(text);
                        }}
              keyboardType='numeric'
              maxLength={2}
              placeholder={distributionText4}
              style={styles.input}
            />
            <Tip>
              (1-30
              {minutes}
              )
            </Tip>
          </Layout>

          <Button
            disabled={!canSubmit}
            onPress={() => {
                        updateMerchant({
                            startingAmount: amount,
                            preparationTime: time,
                        }).then(() => {
                            success("修改成功");
                            navigation.goBack();
                        });
                    }}
            style={styles.btn}
          >
            {confirm}
          </Button>
          <Text category='c1' status='info' style={styles.bottom}>
            {distributionText5}
            :
          </Text>
          <Text category='c1' status='info' style={styles.bottom}>
            {distributionText6}
            :
          </Text>
        </Layout>
      </ScrollPage>
    );
}