import { forwardRef, useImperativeHandle, useRef } from 'react';
import { ArrowLeftIcon } from '../icons/ArrowLeftIcon';
import { ArrowRightIcon } from '../icons/ArrowRightIcon';
import { delay } from 'framer-motion';
import { useWindowWidth } from '../../hooks/useWindowWidth';

export const SliderControls = forwardRef<
  { left(): void; right(): void },
  {
    slidesCount: number;
    slide: number;
    onLeftClick: () => void;
    onRightClick: () => void;
    className?: string;
  }
>(
  (
    { slidesCount, slide = 0, onLeftClick, onRightClick, className = '' },
    ref,
  ) => {
    const width = useWindowWidth();

    const length =
      2 * Math.PI * ((width >= 640 ? 66 : 58) / 2) +
      ((width >= 640 ? 132 : ((width - 32) / 328) * 196) -
        (width >= 640 ? 66 : 58)) *
        2;

    const prevBtnRef = useRef<HTMLButtonElement>(null);
    const nextBtnRef = useRef<HTMLButtonElement>(null);
    const rectRef = useRef<SVGRectElement>(null);

    useImperativeHandle(ref, () => ({
      left: () => prevBtnRef.current?.click(),
      right: () => nextBtnRef.current?.click(),
    }));

    return (
      <div className={'flex items-center gap-2 ' + className}>
        <div className="relative flex justify-center max-sm:order-2">
          <svg
            width={width >= 640 ? 132 : ((width - 32) / 328) * 196}
            height={width >= 640 ? 66 : 58}
            viewBox={`0 0 ${width >= 640 ? 132 : ((width - 32) / 328) * 196} ${width >= 640 ? 66 : 58}`}
            xmlns="http://www.w3.org/2000/svg"
            className="bg-[#14161F] rounded-full fill-none"
          >
            <rect
              x="1"
              y="1"
              width={width >= 640 ? 132 : ((width - 32) / 328) * 196 - 2}
              height={(width >= 640 ? 66 : 58) - 2}
              rx={((width >= 640 ? 66 : 58) - 2) / 2}
              stroke="#3D425C"
              strokeLinecap="butt"
            />
            <rect
              className="transition-all duration-300"
              ref={rectRef}
              x="1"
              y="1"
              width={(width >= 640 ? 132 : ((width - 32) / 328) * 196) - 2}
              height={(width >= 640 ? 66 : 58) - 2}
              rx={((width >= 640 ? 66 : 58) - 2) / 2}
              stroke="white"
              strokeLinecap="butt"
              strokeDasharray={`calc(${length}/${slidesCount}*${slide + 1}) ${length - (length / slidesCount) * (slide + 1)}`}
              strokeDashoffset={`-${(width >= 640 ? 66 : 58) / 2}`}
            />
          </svg>
          <p className="absolute self-center font-medium h4">
            {Math.round(slide) + 1} из {slidesCount}
          </p>
        </div>
        <button
          ref={prevBtnRef}
          onClick={() => {
            if (slide === 0) {
              rectRef.current!.classList.remove(
                'transition-all',
                'duration-300',
              );
              rectRef.current!.setAttribute('stroke-dasharray', `${length} 0`);
              delay(() => {
                rectRef.current!.classList.add(
                  'transition-all',
                  'duration-300',
                );
              }, 1);
            }
            onLeftClick();
          }}
          className="rounded-full sm:p-5 p-4 border border-[#3D425C] bg-[#14161F]"
        >
          <ArrowLeftIcon />
        </button>
        <button
          onClick={() => {
            if (slide + 1 === slidesCount) {
              rectRef.current!.classList.remove(
                'transition-all',
                'duration-300',
              );
              rectRef.current!.setAttribute('stroke-dasharray', `0 ${length}`);
              delay(() => {
                rectRef.current!.classList.add(
                  'transition-all',
                  'duration-300',
                );
              }, 1);
            }
            onRightClick();
          }}
          ref={nextBtnRef}
          className="rounded-full sm:p-5 p-4 border border-[#3D425C] bg-[#14161F] max-sm:order-2"
        >
          <ArrowRightIcon />
        </button>
      </div>
    );
  },
);
