Dingdong_app/components/OpenTimeCom.js

/* 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,
} from "@ui-kitten/components";
import { Scrollpicker } from "beeshell";
import { useModel } from "flooks";
import { useBoolean } from "@umijs/hooks";
import moment from "moment";
import OpenTimeUtil from "../Utils/OpenTimeUtil";

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 OpenTimeCom({ submit, openTime, node$ }) {
  const {
    MONDAY,
    TUESDAY,
    WEDNESDAY,
    THURSDAY,
    FRIDAY,
    SATURDAY,
    SUNDAY,
    every,
    confirm,
    cancel,
    start,
    end,
    hour,
    min,
    weekName,
    weekWords,
  } = useModel("wordsModel");
  const open = useBoolean();
  const weeks = [
    {
      key: "MONDAY",
      label: MONDAY,
    },
    {
      key: "TUESDAY",
      label: TUESDAY,
    },
    {
      key: "WEDNESDAY",
      label: WEDNESDAY,
    },
    {
      key: "THURSDAY",
      label: THURSDAY,
    },
    {
      key: "FRIDAY",
      label: FRIDAY,
    },
    {
      key: "SATURDAY",
      label: SATURDAY,
    },
    {
      key: "SUNDAY",
      label: SUNDAY,
    },
  ];
  const [checkList, changeChecked] = React.useState([]);
  const listItems = weeks.map((item, index) => (
    <CheckBox
      style={styles.checkBoxItem}
      key={index}
      checked={checkList.includes(item.key)}
      onChange={checked => {
        const _checkList = [...checkList];
        if (checked) {
          _checkList.push(item.key);
        } else {
          _checkList.splice(_checkList.indexOf(item.key), 1);
        }
        changeChecked(_checkList);
      }}
    >
      {item.label}
    </CheckBox>
  ));
  const list = React.useMemo(() => {
    const hourSum = 24;
    const minuteSum = 60;
    const hours = range(hourSum / 1).map(item => {
      item = convert2Digit(item * 1);
      return {
        label: `${item} ${hour}`,
        value: item,
      };
    });
    const minutes = range(minuteSum / 10).map(item => {
      item = convert2Digit(item * 10);
      return {
        label: `${item} ${min}`,
        value: item,
      };
    });
    return [hours, minutes];
  }, [open.state]);

  const [time1, setTime1] = React.useState([8, 0]);
  const [time2, setTime2] = React.useState([20, 0]);

  const [showTime1, changeShowTime1] = React.useState(true);
  const [showTime2, changeShowTime2] = React.useState(false);
  const [showWeek, changeShowWeek] = React.useState(false);

  const backOpenTime = React.useMemo(() => {
    return new OpenTimeUtil(
      moment(`${time1[0]}:${time1[1] * 10}`, "H:m").format("HH:mm:ss"),
      moment(`${time2[0]}:${time2[1] * 10}`, "H:m").format("HH:mm:ss"),
      checkList.toString(),
      weekWords()
    );
  }, [openTime, checkList, time1, time2]);

  const allChecked = React.useMemo(() => {
    if (weeks.length === checkList.length) {
      return true;
    }
    return false;
  }, [weeks, checkList]);

  const indeterminate = React.useMemo(() => {
    if (!allChecked && checkList.length > 0) {
      return true;
    }
    return false;
  }, [allChecked, checkList]);

  const canSubmit = React.useMemo(() => {
    if (time1.length === 2 && time2.length === 2 && checkList.length > 0) {
      return true;
    }
    return false;
  }, [time1, time2, checkList]);

  if (node$) {
    node$.useSubscription(() => {
      setTime1(openTime.selectStart);
      setTime2(openTime.selectEnd);
      changeChecked(openTime.getWeek());
      open.setTrue();
    });
  }

  function hideElseShow(key) {
    changeShowTime1(key === 1);
    changeShowTime2(key === 2);
    changeShowWeek(key === 3);

    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
  }

  return (
    <>
      <Modal
        visible={open.state && list.length > 0}
        backdropStyle={styles.backdrop}
        onBackdropPress={() => {
          open.setFalse();
        }}
      >
        <Card disabled appearance="modalCrad" style={{ width: 242 }}>
          <Layout>
            <MenuItem
              appearance="cardContent"
              title={props =>
                titleText(props, start, backOpenTime.getStartTimeStr())
              }
              accessoryRight={ForwardIcon}
              onPress={() => {
                hideElseShow(1);
              }}
            />
          </Layout>
          <Card
            disabled
            appearance="modalCrad"
            style={[{ width: 222 }, showTime1 ? {} : styles.hideHeight]}
          >
            <Scrollpicker
              key="time1"
              list={list}
              proportion={[1, 1]}
              offsetCount={1}
              value={time1}
              onChange={(index, value) => {
                const _time1 = [...time1];
                _time1[index] = value;
                setTime1(_time1);
              }}
            />
          </Card>
          <Layout>
            <MenuItem
              appearance="cardContent"
              title={props =>
                titleText(props, end, backOpenTime.getEndTimeStr())
              }
              accessoryRight={ForwardIcon}
              onPress={() => {
                hideElseShow(2);
              }}
            />
          </Layout>
          <Card
            disabled
            appearance="modalCrad"
            style={[{ width: 222 }, showTime2 ? {} : styles.hideHeight]}
          >
            <Scrollpicker
              key="time2"
              list={list}
              proportion={[1, 1]}
              offsetCount={1}
              value={time2}
              onChange={(index, value) => {
                const _time2 = [...time2];
                _time2[index] = value;
                setTime2(_time2);
              }}
            />
          </Card>
          <Layout>
            <MenuItem
              appearance="cardContent"
              title={props =>
                titleText(props, weekName, backOpenTime.getWeekStr())
              }
              accessoryRight={ForwardIcon}
              onPress={() => {
                hideElseShow(3);
              }}
            />
          </Layout>
          <Card
            appearance="modalCrad"
            style={[showWeek ? {} : styles.hideHeight]}
          >
            <CheckBox
              style={styles.checkBoxAll}
              checked={allChecked}
              indeterminate={indeterminate}
              onChange={checked => {
                changeChecked(
                  checked
                    ? weeks.map(item => {
                        return item.key;
                      })
                    : []
                );
              }}
            >
              {every}
            </CheckBox>

            {listItems}
          </Card>
          <Layout style={styles.btnList}>
            <Button
              style={styles.btn}
              appearance="outline"
              status="info"
              onPress={() => {
                open.setFalse();
              }}
            >
              {cancel}
            </Button>
            <Button
              style={[styles.btn, { marginLeft: 10 }]}
              disabled={!canSubmit}
              onPress={() => {
                submit(backOpenTime);
                open.setFalse();
              }}
            >
              {confirm}
            </Button>
          </Layout>
        </Card>
      </Modal>
    </>
  );
}