import React from "react";
import {useDispatch} from "react-redux";

//strings
import strings from "../constants/localization";

//actions
import {chatDatepicker} from "../actions/chatActions";

//components
import AsideSearchFilterClosed from "./AsideSearchFilterClosed";
import SettingsList, {buildMenuItem} from "./_component/SettingsList";
import {ButtonFloating} from "../../../Talk-ui-kit/src/button";
import {Text} from "../../../Talk-ui-kit/src/typography";
import Container from "../../../Talk-ui-kit/src/container";
import {
  MdOutlineMarkEmailUnread,
  MdOutlineCalendarToday,
  MdDateRange, MdClose
} from "react-icons/md";

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

//statics


export default function ({settings, setSettings, isOpen}) {
  if (!isOpen) {
    return <AsideSearchFilterClosed settings={settings} setSettings={setSettings}/>
  }
  const {unreadChecked, time} = settings;
  const dispatch = useDispatch();

  function openPicker() {
    dispatch(chatDatepicker({
      show: true,
      onSubmit: (fromTime, toTime) => {
        setSettings("time", {
          fromTime,
          toTime
        });
      }
    }))
  }

  const menuItems = [
    buildMenuItem("unreadChecked", strings.showUnreadThreads, unreadChecked, MdOutlineMarkEmailUnread),
    buildMenuItem("time", strings.timeRange, time, MdOutlineCalendarToday,
      <Container className={style.AsideSearchFilter__DatePicker}>

        <Container display="flex" justifyContent="center" alignItems="center"
                   onClick={time ? setSettings.bind(null, "time", null) : openPicker}>
          {time &&
          <Text bold
                size="xs">{strings.rangeSelectedFromDateToDate(new Date(time.fromTime).toLocaleDateString('fa'), new Date(time.toTime).toLocaleDateString('fa'))}</Text>
          }
          <ButtonFloating dark={!time} size="sm" color={time ? "accent" : "gray"}
                          className={style.AsideSearchFilter__DatePickerIconButton}>
            {time ?
              <MdClose size={style.iconSizeMd} style={{margin: "7px 5px"}}/>
              :
              <MdDateRange size={style.iconSizeMd} style={{margin: "7px 5px"}}/>
            }

          </ButtonFloating>
        </Container>

      </Container>
      , true
    )
  ];

  return <SettingsList menuItems={menuItems} setSettings={setSettings}/>;
}