/* eslint-disable prefer-const */
/* eslint-disable no-underscore-dangle */
import React from "react";
import { StyleSheet, LayoutAnimation, Platform, UIManager } from "react-native";
import { range, convert2Digit } from "beeshell/dist/common/utils";
import {
  CheckBox,
  Layout,
  Modal,
  Button,
  Card,
  Text,
  MenuItem,
  Icon,
  SelectItem,
} from "@ui-kitten/components";
import { useEventEmitter, useMount } from "@umijs/hooks";
import { useModel } from "flooks";
import moment from "moment";
import OpenTimeUtil from "../Utils/OpenTimeUtil";
import OpenTimeCom from "./OpenTimeCom";

if (Platform.OS === "android") {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

const styles = StyleSheet.create({
  checkBoxAll: {
    paddingVertical: 10,
  },
  checkBoxItem: {
    paddingVertical: 2,
    paddingHorizontal: 10,
  },
  time: {
    // width: 100,
    // height: 300,
  },
  backdrop: {
    backgroundColor: "rgba(0, 0, 0, 0.5)",
  },
  btnList: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingTop: 15,
  },
  hideHeight: {
    height: 0,
    borderWidth: 0,
  },
  btn: {
    flex: 1,
    minWidth: 50,
  },
});

const ForwardIcon = props => <Icon {...props} name="arrow-ios-forward" />;

const titleText = (props, title, value) => (
  <Text {...props} category="s1" numberOfLines={1} ellipsizeMode="tail">
    {title}
    <Text category="c1" style={{ paddingLeft: 10 }}>
      {value}
    </Text>
  </Text>
);

export default function OpenTime({ submit, week, startTime, endTime }) {
  const { weekWords } = useModel("wordsModel");

  const node$ = useEventEmitter();
  const openTime = React.useMemo(() => {
    console.log(week);
    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]);

  return (
    <>
      <SelectItem
        appearance="form"
        style={{ flex: 1, height: 32 }}
        accessoryRight={ForwardIcon}
        title={props =>
          titleText(props, openTime.getTimeStr(), openTime.getWeekStr())
        }
        onPress={() => {
          node$.emit();
        }}
      />
      <OpenTimeCom
        submit={_openTimeUtil => {
          submit(
            _openTimeUtil.week,
            _openTimeUtil.startTime,
            _openTimeUtil.endTime
          );
        }}
        openTime={openTime}
        node$={node$}
      />
    </>
  );
}