import React from "react";
import { View } from "react-native";
import { Icon, SelectItem } from "@ui-kitten/components";
import { Datepicker, BottomModal } from "beeshell";
import * as TimeUtil from "../Utils/TimeUtil";

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

export default function MyDatepicker(props) {
  const { value, chooseDate } = props || {};

  const [dateValue, chooseValue] = React.useState();

  const bottomRef = React.useRef();

  return (
    <>
      <SelectItem
        appearance="form"
        style={{ flex: 1, height: 32 }}
        accessoryRight={ForwardIcon}
        title={value || " "}
        onPress={() => {
          chooseValue(value);
          bottomRef.current.open();
        }}
      />
      <BottomModal
        title=""
        cancelable
        ref={bottomRef}
        rightCallback={() => {
          chooseDate(dateValue);
        }}
      >
        <View
          style={{
            height: 200,
            marginBottom: 50,
            minHeight: 200,
          }}
        >
          <Datepicker
            proportion={[1, 1, 1]}
            startYear={TimeUtil.getNowYear()}
            numberOfYears={10}
            date={dateValue}
            onChange={date => {
              console.log(date);
              chooseValue(date);
            }}
          />
        </View>
      </BottomModal>
    </>
  );
}