import React, {useEffect, useRef, useState} from "react";
import {useSelector} from "react-redux";
import DatePicker from "react-multi-date-picker";
import persian from "react-date-object/calendars/persian"
import persian_fa from "react-date-object/locales/persian_fa"
import TimePicker from "react-multi-date-picker/plugins/analog_time_picker";

//strings

//actions

//components
import Container from "../../../Talk-ui-kit/src/container";

//styling
import style from "../../styles/app/ModalDatePicker.scss";

//statics

//functions


export default function () {
  const chatDatePicker = useSelector(store => store.chatDatepicker);
  const pickerRef = useRef();
  const {onSubmit} = chatDatePicker;
  const [values, setValues] = useState([])

  useEffect(e => {
    const {show} = chatDatePicker;
    if (show) {
      pickerRef.current.openCalendar();
    }
  }, [chatDatePicker]);

  function onChange(values) {
    if(values.length) {
      setValues(values);
      onSubmit(values[0].toDate().getTime(), values[1].toDate().getTime())
    }
  }

  function onClose() {
    setValues([])
  }

  return <Container className={style.ModalDatePicker}>
    <DatePicker
      value={values}
      onChange={onChange}
      onClose={onClose}
      className="rmdp-mobile"
      inputClass={style.ModalDatePicker__input}
      jalali
      calendar={persian}
      locale={persian_fa}
      range
      ref={pickerRef}
      zIndex={style.zIndex10}
      plugins={[
        <TimePicker hideSeconds/>
      ]}
    />

  </Container>
}