import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import { useModel } from "flooks";
import { Layout, Text, useTheme, Button, Input } from "@ui-kitten/components";
import { useFocusEffect } from "@react-navigation/native";
import ScrollPage from "../../components/ScrollPage";
import NavHeaderBar from "../../components/NavHeaderBar";

const styles = StyleSheet.create({
  lay: {
    backgroundColor: "#fff",
  },
  padBot: {
    paddingBottom: 100,
  },
  list: {
    paddingVertical: 10,
    paddingHorizontal: 15,
    backgroundColor: "transparent",
    flex: 0,
  },
  item: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 10,
    paddingHorizontal: 15,
  },
  input: {
    marginHorizontal: 5,
    minWidth: 49,
  },
  text: {
    flex: 1,
  },
  flexRow: {
    flexDirection: "row",
    alignItems: "center",
  },
  buttonlast: {
    marginLeft: 10,
  },
  button: {
    alignSelf: "flex-start",
  },
});

export default function FirstOrderScreen() {
  const theme = useTheme();
  const { changeBackground } = useModel("barModel", true);

  const { delText, editText, cancel, GPVGLH } = useModel("wordsModel");
  const { loading, success } = useModel("loadingModel");
  const [money, changeMoney] = React.useState("");
  const [edit, changeEdit] = React.useState(false);
  const { firstOrder, updateMerchant } = useModel("userModel");
  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      if (!firstOrder) {
        changeEdit(true);
      } else {
        changeMoney(firstOrder.toString() || "0");
      }
    }, [])
  );

  return (
    <>
      <NavHeaderBar title={GPVGLH} />
      <ScrollPage
        style={styles.lay}
        enabledFresh
        refreshEvent={() => Promise.resolve()}
      >
        <Layout style={[styles.lay]}>
          <Layout style={styles.item}>
            <Layout style={[styles.text, styles.flexRow]}>
              <Text category="c2">新用户立减</Text>
              {edit ? (
                <Input
                  size="small"
                  style={styles.input}
                  value={money}
                  keyboardType="numeric"
                  onChangeText={changeMoney}
                />
              ) : (
                <Text category="c2">{money}</Text>
              )}

              <Text category="c2">元</Text>
            </Layout>
            {!edit ? (
              <>
                <Button
                  size="small"
                  appearance="outline"
                  onPress={() => {
                    changeEdit(true);
                  }}
                >
                  {editText}
                </Button>
                {firstOrder != null && (
                  <Button
                    size="small"
                    status="danger"
                    style={styles.buttonlast}
                    onPress={() => {
                      changeMoney("0");
                      loading();
                      updateMerchant({
                        firstOrder: 0,
                      }).then(() => {
                        success("删除成功");
                        changeEdit(true);
                      });
                    }}
                  >
                    {delText}
                  </Button>
                )}
              </>
            ) : (
              <>
                <Button
                  size="small"
                  onPress={() => {
                    loading();
                    updateMerchant({
                      firstOrder: money,
                    }).then(() => {
                      success("保存成功");
                      changeEdit(false);
                    });
                  }}
                >
                  保存
                </Button>
                <Button
                  size="small"
                  appearance="outline"
                  style={styles.buttonlast}
                  onPress={() => {
                    changeEdit(false);
                    changeMoney(firstOrder.toString() || "0");
                  }}
                >
                  {cancel}
                </Button>
              </>
            )}
          </Layout>
        </Layout>
      </ScrollPage>
    </>
  );
}