'use client';

import Link from 'next/link';
import Image from 'next/image';
import { TouchEvent, useState } from 'react';
import { SidebarList } from '../SidebarList';
import {
  OTHER_LINKS,
  MORE_INFO_LINKS,
  NEWS_LINKS,
  PROFILE_LINKS,
  WEBSITE_LINKS,
  MENU,
} from '@/data';
import logo from '@/public/logo-main.png';

interface SideBarProps {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
}

export const SideBar = ({ isOpen, setIsOpen }: SideBarProps) => {
  // for mobile swipe
  const [position, setPosition] = useState<number>(0);
  const [startX, setStartX] = useState<number>(0);

  const handleTouchStart = (e: TouchEvent<HTMLElement>) => {
    setStartX(e.touches[0].clientX);
  };

  const handleTouchMove = (e: TouchEvent<HTMLElement>) => {
    const deltaX = e.touches[0].clientX - startX;
    setPosition(deltaX);
  };

  const handleTouchEnd = () => {
    // Perform action based on swipe direction and distance
    if (position > 100) {
      // Swipe right action
    } else if (position < -100) {
      // Swipe left action
      setIsOpen(false);
    }
    setPosition(0);
  };

  return (
    <aside
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      className={`fixed top-0 left-0 z-10 grid grid-rows-[99px_1fr] bg-sidebar w-full lg:w-[280px] lg:translate-x-0 h-screen transition-all duration-700 ease-in-out
        ${isOpen ? 'transform-none' : '-translate-x-full overflow-hidden'} 
      `}
    >
      <Link href="/" className="w-full p-[30px] pb-5">
        <Image
          src={logo}
          alt="Logo"
          className="hidden lg:block"
          width={220}
          height={49}
          priority
          quality={100}
        />
      </Link>
      <div
        className={`xs:grid xs:grid-cols-newAuto xs:gap-7 px-[30px] pt-[30px] pb-20 lg:block lg:pb-[30px] overflow-y-auto`}
      >
        <SidebarList
          heading="Menu"
          list={MENU}
          setIsOpenSidebar={setIsOpen}
          className="block lg:hidden"
        />
        <SidebarList
          heading="More Info"
          list={MORE_INFO_LINKS}
          setIsOpenSidebar={setIsOpen}
        />
        <SidebarList
          heading="Profile Links"
          list={PROFILE_LINKS}
          setIsOpenSidebar={setIsOpen}
        />
        <SidebarList
          heading="Websites"
          list={WEBSITE_LINKS}
          setIsOpenSidebar={setIsOpen}
        />
        <SidebarList
          heading="News"
          list={NEWS_LINKS}
          setIsOpenSidebar={setIsOpen}
        />
        <SidebarList
          heading="Links"
          list={OTHER_LINKS}
          setIsOpenSidebar={setIsOpen}
        />
      </div>
    </aside>
  );
};