/* eslint-disable no-underscore-dangle */
/* eslint-disable camelcase */
/* eslint-disable no-unused-vars */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { StyleSheet } from "react-native";
import { Layout, Text, useTheme, Button, Card } from "@ui-kitten/components";
import { useModel } from "flooks";
import { useFocusEffect, useRoute } from "@react-navigation/native";
import ScrollPage from "../components/ScrollPage";
import NavHeaderBar from "../components/NavHeaderBar";
import FormInput from "../components/FormInput";
import ConnectButton from "../components/ConnectButton";
import GuideHeaderBar from "../components/GuideHeaderBar";
import * as RootNavigation from "../navigation/RootNavigation";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: 33,
  },
  tabContent: {
    backgroundColor: "#fff",
    marginTop: 20,
  },
  img: {
    width: 100,
    height: 100,
    alignSelf: "center",
  },
  img2: {
    width: 97,
    height: 21,
    alignSelf: "center",
    marginTop: 2,
  },
  text: {
    marginTop: 16,
  },
  layoutLeft: {
    // flexDirection: "row",
    paddingVertical: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  form: {
    paddingHorizontal: 26,
    paddingVertical: 20,
  },
  textareaContainer: {
    backgroundColor: "#F0F0F0",
    height: 100,
    borderRadius: 4,
  },
  textarea: {
    textAlignVertical: "top", // hack android
    fontSize: 13,
    color: "#333",
    paddingHorizontal: 14,
    paddingVertical: 10,
    height: 100,
  },
});

export default function Guide1Screen() {
  const route = useRoute();
  const theme = useTheme();
  const { changeBackground } = useModel("barModel");
  const { httpPost } = useModel("httpModel", true);
  const { changeGuideStep, mid } = useModel("userModel", true);
  const { success } = useModel("loadingModel", true);

  const {
    guide2_title1,
    guide2_title2,
    guide2_form_1,
    guide2_pla_1,
    guide2_pla_2,
    guide1_pla_2,
    guide2_form_2,
    guide2_form_3,
    guide1_form_4,
    guide1_pla_4,
    guide1_form_5,
    guide1_pla_5,
    next,
    pass,
    passTips,
  } = useModel("wordsModel");
  const { showDialog } = useModel("dialogModel");
  const [pageName, changePageName] = React.useState("");
  const [name, changeName] = React.useState("");
  const [sort, changeSort] = React.useState("");
  const [goodsIds, changeGoodsIds] = React.useState("");
  const { selectInfos, changeSelect } = useModel("goodsModel");

  useFocusEffect(
    React.useCallback(() => {
      changeBackground(theme["color-primary-500"]);
      console.log(route);
      if (route.name) {
        changePageName(route.name);
      }
    }, [])
  );
  React.useEffect(() => {
    if (selectInfos.length > 0) {
      const _ids = selectInfos.map(item => {
        return item.id;
      });
      changeGoodsIds(_ids.join(","));
    }
  }, [selectInfos]);

  const canNext = React.useMemo(() => {
    if (name && sort) {
      return true;
    }
    return false;
  }, [name, sort, goodsIds]);

  const addClass = () => {
    return httpPost(
      "/classification/save",
      {
        name,
        sort,
        goodsIds,
        merchantId: mid,
      },
      { body: "json" }
    ).then(res => {});
  };

  return (
    <>
      {pageName !== "AddNewClass" && <GuideHeaderBar />}
      {pageName === "AddNewClass" && <NavHeaderBar title="添加分类" />}
      <ScrollPage>
        <Layout style={styles.container}>
          {pageName !== "AddNewClass" && (
            <Card appearance="headFilled">
              <Text category="s1">{guide2_title1}</Text>
              <Text category="s1">{guide2_title2}</Text>
            </Card>
          )}
          <Card appearance="formFilled">
            {/* 类别名称 */}
            <FormInput
              label={guide2_form_1}
              placeholder={guide2_pla_1}
              value={name}
              onChange={changeName}
              style={{ paddingVertical: 3 }}
            />
            {/* 显示排序 */}
            <FormInput
              label={guide2_form_2}
              value={sort}
              type="actionSheet"
              list={[1, 2, 3, 4, 5, 6, 7, 8, 9]}
              onChange={changeSort}
              textAlign="right"
            />

            {/* 商品 */}
            <FormInput
              label={guide2_form_3}
              value={goodsIds}
              type="url"
              changePath={() => {
                RootNavigation.navigate("AddClassification", {
                  type: "classification",
                  classificationId: "new",
                  preKey: route.name,
                });
              }}
              textAlign="right"
            />
            {pageName === "AddNewClass" && (
              <Layout style={styles.layoutLeft} level="1">
                <Button
                  status="primary"
                  disabled={!canNext}
                  onPress={() => {
                    addClass().then(_ => {
                      success("添加成功");
                      RootNavigation.goBack();
                      changeSelect([]);
                    });
                  }}
                >
                  确定
                </Button>
              </Layout>
            )}
          </Card>
          {pageName !== "AddNewClass" && (
            <ConnectButton>
              <Layout style={styles.layoutLeft} level="1">
                <Button
                  status="primary"
                  disabled={!canNext}
                  onPress={() => {
                    addClass()
                      .then(_ => {
                        success("添加成功");
                        changeGuideStep("3");
                      })
                      .then(e => {});
                  }}
                >
                  {next}
                </Button>
                <Button
                  style={{ marginTop: 10 }}
                  appearance="ghost"
                  status="primary"
                  onPress={() => {
                    showDialog({
                      bodyText: passTips,
                      cancelable: true,
                      confirmCallback: () => {
                        changeGuideStep("3");
                      },
                    });
                  }}
                >
                  {pass}
                </Button>
              </Layout>
            </ConnectButton>
          )}
        </Layout>
      </ScrollPage>
    </>
  );
}