import React, { useState } from "react";
import TodayIcon from "@mui/icons-material/Today";
import ToggleOffIcon from "@mui/icons-material/ToggleOff";
import ToggleOnIcon from "@mui/icons-material/ToggleOn";

import "./style.scss";

const FilterTools = () => {
  const [isClosedCompleted, setIsCloseCompleted] = useState(false);

  return (
    <div className="filter-tools">
      <div className="filter-tools__first-part">
        <div className="first-part__sort-by">Сортировать по:</div>
        <div className="first-part__sort-menu">Дате</div>
      </div>
      <div className="filter-tools__second-part">
        <div className="second-part__schedule">
          <TodayIcon fontSize="small" />
          Календарь
        </div>
        <div
          className="second-part__close-completed"
          onClick={() => {
            setIsCloseCompleted(!isClosedCompleted);
          }}
        >
          {isClosedCompleted ? (
            <ToggleOnIcon color="primary" />
          ) : (
            <ToggleOffIcon />
          )}
          Скрыть завершенные
        </div>
      </div>
    </div>
  );
};

export default FilterTools;
