import * as React from "react";
import { StyleSheet } from "react-native";
import { Cascader, BottomModal } from "beeshell";
import { useModel } from "flooks";

const styles = StyleSheet.create({
  inputContainer: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 10,
    paddingHorizontal: 4,
  },
  input: {
    flex: 1,
  },
  label: {
    width: 80,
    marginRight: 19,
    flexShrink: 0,
  },
  labelleft: {
    width: 73,
    flexShrink: 0,
  },
  right: {
    flexDirection: "row",
  },
  code: {
    paddingHorizontal: 5,
    marginLeft: 5,
  },
  selectContent: {
    backgroundColor: "#F0F0F0",
  },
  titleStyle: {
    fontSize: 15,
  },
  leftLabelTextStyle: {
    fontSize: 13,
  },
  rightLabelTextStyle: {
    fontSize: 13,
  },
  sub: {
    color: "#787878",
    position: "absolute",
    left: 90,
    zIndex: 2,
  },
  upload: {
    marginTop: 20,
    width: 67,
    height: 67,
  },
});

export default function OpenTimeCom(props) {
  const { selectTitle, list, node$, defaultValue, submit } = props;
  const { cancel, confirm } = useModel("wordsModel");
  const [selectVal, setSelectVal] = React.useState("");
  const [selectInfo, setSelectInfo] = React.useState({});
  const bottomRef = React.useRef();

  if (node$) {
    node$.useSubscription(() => {
      setSelectVal(defaultValue);
      bottomRef.current.open();
    });
  }
  return (
    <BottomModal
      ref={bottomRef}
      title={selectTitle}
      titleStyle={styles.titleStyle}
      cancelable
      leftLabelText={cancel}
      leftLabelTextStyle={styles.leftLabelTextStyle}
      rightLabelText={confirm}
      rightLabelTextStyle={styles.rightLabelTextStyle}
      rightCallback={() => {
        bottomRef.current.close();
        submit(selectInfo);
      }}
    >
      <Cascader
        style={{
          width: "100%",
          height: 200,
          marginBottom: 50,
          minHeight: 200,
        }}
        data={list}
        fieldKeys={{
          labelKey: "name",
          idKey: "id",
          activeKey: "choose",
        }}
        onChange={(value, info) => {
          setSelectVal(value[0]);
          setSelectInfo(info[info.length - 1]);
        }}
      />
    </BottomModal>
  );
}