Dingdong_app/components/OpenTime.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,
  SelectItem,
} from "@ui-kitten/components";
import { Scrollpicker } from "beeshell";
import { useModel } from "flooks";
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 OpenTime({
  open,
  submit,
  cancelEvent,
  openModal,
  week,
  startTime,
  endTime,
}) {
  const {
    MONDAY,
    TUESDAY,
    WEDNESDAY,
    THURSDAY,
    FRIDAY,
    SATURDAY,
    SUNDAY,
    every,
    confirm,
    cancel,
    start,
    end,
    hour,
    min,
    weekName,
    weekWords,
  } = useModel("wordsModel");
  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]);

  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 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]);

  const time1Str = React.useMemo(() => {
    if (time1.length === 2) {
      const str = `${time1[0]}:${time1[1] * 10}`;
      return moment(str, "H:m").format("HH:mm");
    }
    return "";
  }, [time1]);

  const time2Str = React.useMemo(() => {
    if (time2.length === 2) {
      const str = `${time2[0]}:${time2[1] * 10}`;
      return moment(str, "H:m").format("HH:mm");
    }
    return "";
  }, [time2]);

  const weekStr = React.useMemo(() => {
    if (allChecked) {
      return every;
    }
    const _weeks = weeks.filter(item => {
      return checkList.includes(item.key);
    });
    return _weeks
      .map(item => {
        return item.label;
      })
      .join(",");
  }, []);

  const [showName, setShowName] = React.useState([" ", ""]);

  React.useEffect(() => {
    if (week && endTime && startTime) {
      let _openTimeUtil = new OpenTimeUtil(startTime, endTime, week, weekWords);
      setShowName([_openTimeUtil.getTimeStr(), _openTimeUtil.getWeekStr()]);
    }
  }, [week, endTime, startTime]);

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

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

  return (
    <>
      <SelectItem
        appearance="form"
        style={{ flex: 1, height: 32 }}
        accessoryRight={ForwardIcon}
        title={props => titleText(props, showName[0], showName[1])}
        onPress={openModal}
      />
      <Modal
        visible={open && list.length > 0}
        backdropStyle={styles.backdrop}
        onBackdropPress={cancelEvent}
      >
        <Card disabled appearance="modalCrad" style={{ width: 242 }}>
          <Layout>
            <MenuItem
              appearance="cardContent"
              title={props => titleText(props, start, time1Str)}
              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, time2Str)}
              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, weekStr)}
              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={cancelEvent}
            >
              {cancel}
            </Button>
            <Button
              style={[styles.btn, { marginLeft: 10 }]}
              disabled={!canSubmit}
              onPress={() => {
                submit(time1Str, time2Str, checkList);
                setShowName([`${time1Str}~${time2Str}`, weekStr]);
              }}
            >
              {confirm}
            </Button>
          </Layout>
        </Card>
      </Modal>
    </>
  );
}