Dingdong_app/components/OpenTime.js

/* 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";

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,
    defaultValue,
}) {
    const {
        MONDAY,
        TUESDAY,
        WEDNESDAY,
        THURSDAY,
        FRIDAY,
        SATURDAY,
        SUNDAY,
        every,
        confirm,
        cancel,
        start,
        end,
        hour,
        min,
        weekName,
    } = 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 (defaultValue && defaultValue.length > 0) {
            setShowName(defaultValue);
        }
    }, [defaultValue]);

    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>
      </>
    );
}