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

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 ClassificationEdit({ navigation }) {
    const route = useRoute();
    const { httpGet, httpPost } = useModel("httpModel", true);
    const {  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 { removeCLass } = useModel("goodsModel", true);
    const [pageName, changePageName] = React.useState("");
    const [id, changeId] = React.useState("");
    const [name, changeName] = React.useState("");
    const [sort, changeSort] = React.useState("");
    const [goodsIds, changeGoodsIds] = React.useState("");
    const { selectInfos } = useModel("goodsModel");

    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",
            {
                id,
                name,
                sort,
                goodsIds,
                merchantId: mid,
            },
            { body: "json" },
            true
        );
    };

    const refreshEvent = () => {
        const { classifyId, classifyTitle } = route.params || {};
        changeId(classifyId || 0);
        changePageName(classifyTitle);
        return httpGet(`/classification/get/${  classifyId}`, {}, true).then(
            res => {
                changeName(res.name || "");
                changeSort(res.sort || 1);
                changeGoodsIds(res.goodsIds || "");
            }
        );
    };

    function delEvent() {
        removeCLass({ id, goodsIds }, () => {
            navigation.goBack();
        });
    }

    return (
      <>
        <ScrollPage
          statusType='primary'
          navHeaderBarTitle={pageName}
          enabledFresh
          refreshEvent={refreshEvent}
        >
          <Layout style={styles.container}>
            <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={() => {
                                navigation.navigate("AddClassification", {
                                    type: "classification",
                                    classificationId: id,
                                });
                            }}
                textAlign='right'
              />
              <Layout style={styles.layoutLeft} level='1'>
                <Button
                  status='primary'
                  disabled={!canNext}
                  onPress={() => {
                                    addClass().then(_ => {
                                        success("添加成功");
                                        navigation.goBack();
                                    });
                                }}
                >
                  确定
                </Button>
                <Button
                  style={{ marginLeft: 20 }}
                  appearance='outline'
                  status='info'
                  onPress={delEvent}
                >
                  删除
                </Button>
              </Layout>
            </Card>
          </Layout>
        </ScrollPage>
      </>
    );
}