// it has style inside index.scss ---> // Start SelectYear && end SelectYear

import React, { useState, useRef } from "react";
import ScrollContainer from "react-indiana-drag-scroll";

import "./index.scss";

import arrowDown from "./arrow-down.svg";
import arrowUp from "./arrow-up.svg";
import Month from "./Month.js";

const SelectYear = ({ items }) => {
  const [selectedYear, setSelectedYear] = useState(null);
  const yearEl = useRef(null);
  const h = 40;
  const up = () => {
    if (yearEl.current) yearEl.current.scrollTop -= h;
  };
  const down = () => {
    if (yearEl.current) yearEl.current.scrollTop += h;
  };
  const scrollTo = (index) => {
    yearEl.current.scrollTop = (index - 1) * h;
  };

  return (
    <section className="flex flex-row items-center mx-auto w-8/12 my-20">
      <div className="flex flex-col items-center">
        <img src={arrowUp} onClick={up} alt="" />

        <div
          ignoreElements={"#not-work-drag"}
          className={`overflow-y-hidden	 transition-all ease-in-out delay-150 scroll-smooth h-[${
            3 * h
          }px] mb-2`}
          ref={yearEl}
        >
          {/* <div
            className="transition ease-in-out delay-500"
            id="not-work-drag"
            style={{
              height: "100%",
              position: "absolute",
              display: "flex",
              flexDirection: "column",
              justifyContent: "space-between",
              left: "12%",
            }}
          ></div> */}
          <div className="flex flex-col h-28 ">
            {items.map((item, index) => (
              <p
                id={item.id}
                // href={`#${item.id}`}
                onClick={() => {
                  scrollTo(index);
                  setSelectedYear(item);
                  // if(index<items.length-2) setTimeout(up, 1);
                }}
                key={index}
                className={`text-base my-2  cursor-pointer text-center transition ease-in-out delay-150 ${
                  selectedYear === item
                    ? "text-[#06BACE] font-sansbold text-2xl"
                    : "text-gray-500"
                }`}
              >
                {item.year}
              </p>
            ))}
          </div>
        </div>
        <img src={arrowDown} onClick={down} alt="" />
      </div>
      <div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div>
      <div className={`flex flex-col items-center`}>
        <Month />
      </div>
    </section>
  );
};

export default SelectYear;

SelectYear.defaultProps = {
  items: [
    {
      id: 1,
      year: "1400",
    },
    {
      id: 2,
      year: "1399",
    },
    {
      id: 3,
      year: "1398",
    },
    {
      id: 4,
      year: "1397",
    },
    {
      id: 5,
      year: "1396",
    },
    {
      id: 6,
      year: "1400",
    },
    {
      id: 7,
      year: "1399",
    },
    {
      id: 8,
      year: "1398",
    },
    {
      id: 9,
      year: "1397",
    },
    {
      id: 10,
      year: "1396",
    },
  ],
};