import React from "react";

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

//actions

//components
import {Text} from "../../../Talk-ui-kit/src/typography";
import Container from "../../../Talk-ui-kit/src/container";
import {
  MdClose
} from "react-icons/md";

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

//statics

function BuildBadge({value, onClose}) {
  return <Container className={style.AsideSearchFilterClosed__Badge} display="flex" alignItems="center"
                    onClick={onClose}
                    justifyContent="center">
    <Container flex="1 1 0" className={style.AsideSearchFilterClosed__BadgeValue}>
      <Text size="sm">{value}</Text>
    </Container>
    <Container flex="none">
      <MdClose size={style.iconSizeSm} color={style.colorGrayDark}/>
    </Container>
  </Container>
}

export default function ({settings, setSettings, isOpen}) {
  const {unreadChecked, time} = settings;
  if (!time && !unreadChecked) {
    return null
  }
  return <Container display="inline-flex" justifyContent="center" className={style.AsideSearchFilterClosed}>
    {
      unreadChecked &&
      <BuildBadge value={strings.onlyUnreadThreads} onClose={setSettings.bind(null, "unreadChecked", false)}/>
    }
    {
      time &&
      <BuildBadge
        value={strings.rangeSelectedFromDateToDate(new Date(time.fromTime).toLocaleDateString('fa'), new Date(time.toTime).toLocaleDateString('fa'))}
        onClose={setSettings.bind(null, "time", null)}/>
    }

  </Container>
}