import React, { useState } from "react";
import Scrollbars from "react-custom-scrollbars-2";
import { Sliders } from "react-feather";
import Select from "react-select";
import TodoModal from "../../core/modals/applications/todoModal";
import { Link } from "react-router-dom";
import { OverlayTrigger, Tooltip } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { ChevronUp, RotateCcw } from "react-feather";
import { setToogleHeader } from "../../core/redux/action";
import { PlusCircle } from "react-feather";
import Content from "./content";

const ToDo = () => {
  const [isOpen, setOpen] = useState(false);
  const dispatch = useDispatch();
  const data = useSelector((state) => state.toggle_header);
  const options = [
    { value: "sortByDate", label: "Sort by Date" },
    { value: "Ascending", label: "Ascending" },
    { value: "Descending", label: "Descending" },
    { value: "Recently Viewed", label: "Recently Viewed" },
    { value: "Recently Added", label: "Recently Added" },
    { value: "Creation Date", label: "Creation Date" },
  ];

  const renderRefreshTooltip = (props) => (
    <Tooltip id="refresh-tooltip" {...props}>
      Refresh
    </Tooltip>
  );
  const renderCollapseTooltip = (props) => (
    <Tooltip id="refresh-tooltip" {...props}>
      Collapse
    </Tooltip>
  );
  return (
    // <div className="page-wrapper notes-page-wrapper notes-tag-left">
    <div
      className={`page-wrapper notes-page-wrapper ${
        isOpen && "notes-tag-left"
      }`}
    >
      <div className="content">
        <div className="page-header page-add-notes">
          <div className="add-item d-flex">
            <div className="page-title">
              <h4>Todo</h4>
              <h6>Manage your tasks</h6>
            </div>
            <Link
              id="toggle_btn2"
              className="notes-tog"
              to="#"
              onClick={() => setOpen(!isOpen)}
            >
              <i className="fas fa-chevron-left" />
            </Link>
          </div>
          <div className="d-flex flex-sm-row flex-column align-items-sm-center align-items-start">
            <div className="input-block add-lists todo-inbox-check">
              <label className="checkboxs">
                <input type="checkbox" defaultChecked />
                <span className="checkmarks" />
                Mark all as Complete
              </label>
            </div>
            <div className="form-sort me-2 mb-sm-0 mb-3 stylewidth">
              <Sliders className="info-img" />
              <Select
                className="select"
                options={options}
                placeholder="Sort by Date"
              />
            </div>
            <ul className="table-top-head">
              <li>
                <OverlayTrigger placement="top" overlay={renderRefreshTooltip}>
                  <Link data-bs-toggle="tooltip" data-bs-placement="top">
                    <RotateCcw />
                  </Link>
                </OverlayTrigger>
              </li>
              <li>
                <OverlayTrigger placement="top" overlay={renderCollapseTooltip}>
                  <Link
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    id="collapse-header"
                    className={data ? "active" : ""}
                    onClick={() => {
                      dispatch(setToogleHeader(!data));
                    }}
                  >
                    <ChevronUp />
                  </Link>
                </OverlayTrigger>
              </li>
            </ul>
            <div className="page-btn">
              <Link
                to="#"
                className="btn btn-added"
                data-bs-toggle="modal"
                data-bs-target="#note-units"
              >
                <PlusCircle className="me-2" /> Add Task{" "}
              </Link>
            </div>
          </div>
        </div>
        <div className="row">
          <div
            className={`col-xl-3 col-md-12 sidebars-right theiaStickySidebar section-bulk-widget  ${
              isOpen && "section-notes-dashboard"
            }`}
          >
            <div className="notes-dash">
              <div className="notes-top-head">
                <h5>
                  {" "}
                  <i
                    data-feather="file-text"
                    className="feather-file-text me-1"
                  />
                  Todo List
                </h5>
              </div>
              <div className="notes-top-head-submenu">
                <div
                  className="nav flex-column nav-pills todo-inbox"
                  id="v-pills-tab"
                  role="tablist"
                  aria-orientation="vertical"
                >
                  <button
                    className="nav-link todo-tab todo-inbox active"
                    id="v-pills-profile-tab"
                    data-bs-toggle="pill"
                    data-bs-target="#v-pills-profile"
                    type="button"
                    role="tab"
                    aria-controls="v-pills-profile"
                    aria-selected="true"
                  >
                    {" "}
                    <i data-feather="inbox" className="feather-inbox me-2" />
                    Inbox <span className="ms-2">1</span>
                  </button>
                  <button
                    className="nav-link todo-tab todo-inbox"
                    id="v-pills-home-tab"
                    data-bs-toggle="pill"
                    data-bs-target="#v-pills-home"
                    type="button"
                    role="tab"
                    aria-controls="v-pills-home"
                    aria-selected="false"
                  >
                    {" "}
                    <i
                      data-feather="check-circle"
                      className="feather-check-circle me-2"
                    />
                    Done
                  </button>
                  <button
                    className="nav-link todo-tab-btn todo-inbox"
                    id="v-pills-messages-tab"
                    data-bs-toggle="pill"
                    data-bs-target="#v-pills-messages"
                    type="button"
                    role="tab"
                    aria-controls="v-pills-messages"
                    aria-selected="false"
                  >
                    {" "}
                    <i data-feather="star" className="feather-star me-2" />
                    Important
                  </button>
                  <button
                    className="nav-link todo-tab todo-inbox mb-0"
                    id="v-pills-settings-tab"
                    data-bs-toggle="pill"
                    data-bs-target="#v-pills-settings"
                    type="button"
                    role="tab"
                    aria-controls="v-pills-settings"
                    aria-selected="false"
                  >
                    {" "}
                    <i
                      data-feather="trash-2"
                      className="feather-trash-2 me-2"
                    />
                    Trash
                  </button>
                </div>
              </div>
              <div className="content-submenu-tag">
                <h6>Tags</h6>
                <ul className="tags-list">
                  <li className="personal">
                    <Link to="#">
                      <span>
                        <i className="fas fa-square" />
                      </span>
                      Pending
                    </Link>
                  </li>
                  <li className="social">
                    <Link to="#">
                      <span>
                        <i className="fas fa-square" />
                      </span>
                      Onhold
                    </Link>
                  </li>
                  <li className="public">
                    <Link to="#">
                      <span>
                        <i className="fas fa-square" />
                      </span>
                      Inprogress
                    </Link>
                  </li>
                  <li className="work">
                    <Link to="#">
                      <span>
                        <i className="fas fa-square" />
                      </span>
                      Done
                    </Link>
                  </li>
                </ul>
                <h6>Priority</h6>
                <ul className="priority-list">
                  <li className="medium">
                    <Link to="#">
                      <span>
                        <i className="fas fa-square" />
                      </span>
                      Medium
                    </Link>
                  </li>
                  <li className="high">
                    <Link to="#">
                      <span>
                        <i className="fas fa-square" />
                      </span>
                      High
                    </Link>
                  </li>
                  <li className="low">
                    <Link to="#">
                      <span>
                        <i className="fas fa-square" />
                      </span>
                      Low
                    </Link>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div
            className={`col-xl-9 budget-role-notes  ${
              isOpen && "budgeted-role-notes"
            }`}
          >
            {isOpen ? (
              <Content />
            ) : (
              <Scrollbars>
                <Content />
              </Scrollbars>
            )}
          </div>
        </div>
        <TodoModal />
      </div>
    </div>
  );
};

export default ToDo;