'use client';

import React from 'react';

import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
import 'react-horizontal-scrolling-menu/dist/styles.css';
import { HiOutlineChevronLeft, HiOutlineChevronRight } from 'react-icons/hi';

import Tag from '@/components/tags/Tag';

interface TagRowProps {
  tags: Array<{
    key: string;
    label: string;
    active?: boolean;
    href?: string;
    onClick?: () => void;
  }>;
  className?: string;
}

export default function TagRow({ tags, className = '' }: TagRowProps) {
  return (
    <div className={`w-full flex items-center ${className}`}>
      <div className="max-w-full overflow-hidden">
        <ScrollMenu
          LeftArrow={LeftArrow}
          RightArrow={RightArrow}
          scrollContainerClassName="flex gap-1"
        >
          {tags.map((tag) => (
            <Tag
              key={tag.key}
              label={tag.label}
              active={tag.active}
              href={tag.href}
              onClick={tag.onClick}
            />
          ))}
        </ScrollMenu>
      </div>
    </div>
  );
}

function LeftArrow() {
  const { isFirstItemVisible, scrollPrev } = React.useContext(VisibilityContext);
  return (
    <Arrow
      disabled={isFirstItemVisible}
      onClick={() => scrollPrev()}
      innerClassName="left-0 bg-gradient-to-r justify-start"
      icon={<HiOutlineChevronLeft />}
    />
  );
}

function RightArrow() {
  const { isLastItemVisible, scrollNext } = React.useContext(VisibilityContext);
  return (
    <Arrow
      disabled={isLastItemVisible}
      onClick={() => scrollNext()}
      innerClassName="right-0 bg-gradient-to-l justify-end"
      icon={<HiOutlineChevronRight />}
    />
  );
}

interface ArrowProps {
  disabled: boolean;
  onClick: () => void;
  innerClassName: string;
  icon: React.ReactNode;
}

function Arrow(props: ArrowProps) {
  return (
    <button
      className={'relative h-full bg-white transition-all ' + (props.disabled ? 'w-0' : 'w-0')}
      onClick={props.onClick}
    >
      <div
        className={
          'absolute h-full aspect-[2/1] top-0 z-10 from-white via-white to-transparent flex items-center transition-all ' +
          (props.disabled ? 'opacity-0 pointer-events-none ' : 'opacity-100 ') +
          props.innerClassName
        }
      >
        {props.icon}
      </div>
    </button>
  );
}