/* eslint-disable no-underscore-dangle */
import * as React from "react";
import {
  Icon,
  Text,
  Layout,
  Button,
  Menu,
  MenuItem,
} from "@ui-kitten/components";
import { StyleSheet } from "react-native";
import { useModel } from "flooks";
import { useEventEmitter, useMount } from "@umijs/hooks";
import Textarea from "react-native-textarea";
import OpenTimeUtil from "../Utils/OpenTimeUtil";
import ListUtil from "../Utils/ListUtil";
import UpLoadImage from "../components/UpLoadImage";
import * as RootNavigation from "../navigation/RootNavigation";
import OpenTimeCom from "../components/OpenTimeCom";
import ClassificationSelect from "../components/ClassificationSelect";

const ForwardIcon = props => (
  <Icon
    {...props}
    name="arrow-ios-forward"
    fill="#B4B4B4"
    style={{ width: 15, height: 15, fontWeight: 500 }}
  />
);

const styles = StyleSheet.create({
  tabContainer: {
    backgroundColor: "#fff",
    flex: 1,
  },
  top: {
    paddingVertical: 20,
    paddingHorizontal: 13,
  },
  imgList: {
    flexDirection: "row",
  },
  upload: {
    marginRight: 10,
    width: 67,
    flexShrink: 0,
  },
  textareaContainer: {
    backgroundColor: "#F0F0F0",
    height: 100,
    alignSelf: "stretch",
    borderRadius: 4,
  },
  textarea: {
    textAlignVertical: "top", // hack android
    fontSize: 13,
    color: "#333",
    paddingHorizontal: 14,
    paddingVertical: 10,
    height: 100,
  },
  text: {
    paddingVertical: 10,
  },
  button: {
    alignSelf: "flex-end",
    marginTop: 10,
    marginRight: 14,
  },
  menu: {
    borderColor: "#EEEEEE",
    borderTopWidth: 6,
    backgroundColor: "#fff",
    paddingHorizontal: 15,
  },
  menuItem: {},
  lable: {
    flexDirection: "row",
    flex: 1,
  },
  lableName: {
    flexShrink: 0,
    flexBasis: "50%",
    marginHorizontal: 8,
    fontSize: 13,
  },
  lableText: {},
});

const Label = (props, title, value) => (
  <Layout style={[styles.lable]}>
    <Text {...props} style={[styles.lableName]}>
      {title}
    </Text>
    <Text
      {...props}
      // eslint-disable-next-line react/destructuring-assignment
      style={[props.style, styles.lableText]}
      numberOfLines={1}
      ellipsizeMode="tail"
    >
      {value}
    </Text>
  </Layout>
);

export default function HomePage3() {
  const { showDialog } = useModel("dialogModel", true);
  const [text, changeText] = React.useState("");
  const {
    img,
    updateMerchant,
    introduction,
    showName,
    phone,
    address,
    category,
    week,
    endTime,
    startTime,
  } = useModel("userModel");
  const categoryList = new ListUtil(category);
  const { loading, success } = useModel("loadingModel");
  const { httpGet } = useModel("httpModel", true);
  const [allCategoryList, setallCategoryList] = React.useState([]);

  useMount(() => {
    httpGet("/category/tree", { id: 1 }).then(res => {
      setallCategoryList(res);
    });
  });

  const {
    home3Title1,
    home3Title2,
    confirm,
    getWordsStr,
    weekWords,
  } = useModel("wordsModel");

  const node$ = useEventEmitter();
  const SelectNode$ = useEventEmitter();

  const imgList = React.useMemo(() => {
    const list = img ? img.split(",") : [];
    list.push("");
    return [...new Set(list)];
  }, [img]);

  const openTime = React.useMemo(() => {
    if (startTime && endTime && week) {
      // eslint-disable-next-line no-underscore-dangle
      return new OpenTimeUtil(startTime, endTime, week, weekWords());
    }
    return new OpenTimeUtil();
  }, [startTime, endTime, week, weekWords]);

  // eslint-disable-next-line no-shadow
  function changeImg(img, index) {
    const _imgs = [...imgList];
    _imgs.splice(index, 1, img);
    const _img1 = new Set(_imgs);
    updateMerchant({
      img: [..._img1].join(","),
    });
  }

  function delImg(index) {
    const _imgs = [...imgList];
    _imgs.splice(index, 1);
    const _img1 = new Set(_imgs);
    updateMerchant({
      img: [..._img1].join(","),
    });
  }

  const showImgList = list => {
    return list.map((item, index) => {
      return (
        <Layout key={index} style={styles.upload}>
          <UpLoadImage
            value={item}
            // eslint-disable-next-line no-shadow
            changeIcon={img => changeImg(img, index)}
            size={67}
            hasCancel
            aspect={[1, 1]}
            delEvent={() => {
              delImg(index);
            }}
          />
        </Layout>
      );
    });
  };

  function showChange(key, val, title, max, type) {
    showDialog({
      pla: "",
      maxLength: max || 50,
      defaultValue: val,
      InputType: type,
      isEdit: true,
      title,
      cancelable: true,
      confirmCallback: info => {
        loading();
        updateMerchant({ [key]: info }).then(() => {
          success("成功");
        });
      },
    });
  }

  return (
    <Layout style={styles.tabContainer}>
      <Layout style={styles.top}>
        <Layout style={styles.imgList}>{showImgList(imgList)}</Layout>

        <Layout>
          <Text style={styles.text}>{home3Title1}</Text>
          <Textarea
            containerStyle={styles.textareaContainer}
            style={styles.textarea}
            onChangeText={changeText}
            defaultValue={introduction}
            maxLength={500}
            placeholder={home3Title2}
            placeholderTextColor="#B4B4B4"
            underlineColorAndroid="transparent"
          />
          <Button
            size="small"
            style={styles.button}
            onPress={() => {
              loading();
              updateMerchant({
                introduction: text,
              }).then(() => {
                success("成功");
              });
            }}
          >
            {confirm}
          </Button>
        </Layout>
      </Layout>
      <Menu style={styles.menu}>
        <MenuItem
          title={props =>
            Label(props, getWordsStr("register_form_1"), showName)
          }
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() =>
            showChange(
              "showName",
              showName,
              getWordsStr("register_form_1"),
              25,
              "text"
            )
          }
        />
        <MenuItem
          title={props =>
            Label(
              props,
              getWordsStr("guideHome_form_1"),
              categoryList.getKey("name")
            )
          }
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() => {
            SelectNode$.emit();
          }}
        />
        <MenuItem
          title={props =>
            Label(props, getWordsStr("guideHome_form_2"), address)
          }
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() => RootNavigation.navigate("SearchMap")}
        />
        <MenuItem
          title={props => Label(props, getWordsStr("guideHome_form_3"), phone)}
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() =>
            showChange(
              "phone",
              phone,
              getWordsStr("guideHome_form_3"),
              11,
              "phone"
            )
          }
        />
        <MenuItem
          title={props =>
            Label(props, getWordsStr("guideHome_form_4"), openTime.getShowStr())
          }
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() => {
            node$.emit();
          }}
        />
        <MenuItem
          title={getWordsStr("guideHome_form_5")}
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() => {
            RootNavigation.navigate("Qualification");
          }}
        />
      </Menu>

      <OpenTimeCom
        submit={_openTimeUtil => {
          loading();
          updateMerchant({
            startTime: _openTimeUtil.startTime,
            endTime: _openTimeUtil.endTime,
            week: _openTimeUtil.week,
          }).then(() => {
            success("成功");
          });
        }}
        openTime={openTime}
        node$={node$}
      />
      <ClassificationSelect
        selectTitle={getWordsStr("guideHome_form_1")}
        list={allCategoryList}
        node$={SelectNode$}
        defaultValue={categoryList}
        submit={selectVal => {
          const info = { ...selectVal[selectVal.length - 1] };
          loading();
          updateMerchant({
            categoryId: info.id,
          }).then(() => {
            success("成功");
          });
        }}
      />
    </Layout>
  );
}