/* eslint-disable no-shadow */
/* eslint-disable no-unused-vars */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import moment from "moment";
import { useModel } from "flooks";
import { useFocusEffect } from "@react-navigation/native";
import { Layout, Button, useTheme, Divider } from "@ui-kitten/components";
import NavHeaderBar from "../../components/NavHeaderBar";
import FormInput from "../../components/FormInput";

const styles = StyleSheet.create({
  form: {
    paddingHorizontal: 10,
    flex: 1,
    marginTop: 10,
  },
  radio: {
    paddingVertical: 15,
    paddingHorizontal: 15,
  },
  btn: {
    marginHorizontal: 15,
    marginVertical: 10,
  },
  btnList: {
    alignItems: "center",
  },
  label: {
    width: 105,
  },
});

export default function CouponAddScreen({ navigation, route }) {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const { KEPOWT, PXTFMU, delText, TMDCMR, VCGOOE, ZTIPSF, confirm } = useModel(
    "wordsModel"
  );

  const [id, setId] = React.useState();
  const {
    defaultStartTime,
    defaultEndTime,
    saveInfo,
    removeInfo,
    getInfo,
  } = useModel("couponModel");
  const [name, changeName] = React.useState("");
  const [amount, changeAmount] = React.useState("");
  const [fullAmount, changeFullAmount] = React.useState("");
  const [startDate, changeStartDate] = React.useState("");
  const [endDate, changeEndDate] = React.useState("");

  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      const { params } = route;
      const { id, pageName } = params || {};
      if (id) {
        setId(id);
      } else {
        changeEndDate(defaultEndTime);
        changeStartDate(defaultStartTime);
      }
    }, [])
  );

  React.useEffect(() => {
    if (id) {
      getInfo(id).then(res => {
        changeName(res.name);
        changeAmount(res.amount.toString());
        changeFullAmount(res.fullAmount.toString());
        changeStartDate(res.startDate);
        changeEndDate(res.endDate);
      });
    }
  }, [id]);

  const canNext = React.useMemo(() => {
    if (
      name &&
      amount &&
      startDate &&
      endDate &&
      moment(startDate, "YYYY-MM-DD").format("X") <
        moment(endDate, "YYYY-MM-DD").format("X")
    ) {
      return true;
    }
    return false;
  }, [name, amount, fullAmount, id, startDate, endDate]);

  const submit = () => {
    saveInfo({ id, name, amount, fullAmount, startDate, endDate }).then(res => {
      navigation.goBack();
    });
  };

  const remove = () => {
    removeInfo(id).then(res => {
      navigation.goBack();
    });
  };

  return (
    <>
      <NavHeaderBar title={KEPOWT} />

      <Layout style={styles.form}>
        {/* 优惠券名称 */}
        <FormInput
          label={PXTFMU}
          labelStyle={styles.label}
          key={1}
          placeholder={TMDCMR}
          value={name}
          onChange={changeName}
        />
        {/* 优惠券金额 */}
        <FormInput
          label="优惠券金额"
          labelStyle={styles.label}
          key={2}
          placeholder="输入金额"
          type="money"
          value={amount}
          onChange={changeAmount}
        />

        <Divider />
        {/* 优惠券门槛金额 */}
        <FormInput
          label="优惠券门槛金额"
          labelStyle={styles.label}
          key={3}
          placeholder="输入门槛金额"
          type="money"
          value={fullAmount}
          onChange={changeFullAmount}
        />

        {/* 优惠券开始时间 */}
        <FormInput
          label={VCGOOE}
          labelStyle={styles.label}
          key={4}
          placeholder=""
          type="date"
          value={startDate}
          onChange={changeStartDate}
        />

        {/* 优惠券结束时间 */}
        <FormInput
          label={ZTIPSF}
          labelStyle={styles.label}
          key={5}
          placeholder=""
          type="date"
          value={endDate}
          onChange={changeEndDate}
        />

        <Layout style={styles.btnList}>
          <Button style={styles.btn} disabled={!canNext} onPress={submit}>
            {confirm}
          </Button>
          {id != null && (
            <Button appearance="ghost" status="info" onPress={remove}>
              {delText}
            </Button>
          )}
        </Layout>
      </Layout>
    </>
  );
}