import IconLayout from '../Icons/IconLayout';
import IconHuggy from '../Icons/IconHuggy';
import IconImage from '../Icons/IconImage';
import IconText from '../Icons/IconText';
import LayoutSelector from '../Layout/LayoutSelector';
import HuggyMenu from './HuggyMenu';
import { LayoutType } from '../../types/canvas.types';
import { Huggy } from '../../data/huggys';

interface SidebarProps {
  onLayoutClick: () => void;
  onHuggyClick: () => void;
  onImageClick: () => void;
  onTextClick: () => void;
  onSelectLayout: (layoutId: LayoutType) => void;
  onSelectHuggy: (huggy: Huggy) => void;
  activeButton: 'layout' | 'huggy' | 'image' | 'text' | null;
}

export default function Sidebar({
  onLayoutClick,
  onHuggyClick,
  onImageClick,
  onTextClick,
  onSelectLayout,
  onSelectHuggy,
  activeButton
}: SidebarProps) {
  return (
    <div
      className="fixed left-5 top-1/2 -translate-y-1/2 z-50"
      onDragStart={(e) => {
        e.preventDefault();
        e.stopPropagation();
      }}
      onDrag={(e) => {
        e.preventDefault();
        e.stopPropagation();
      }}
      onDragOver={(e) => {
        e.preventDefault();
        e.stopPropagation();
      }}
    >
      <div className="sidebar-container bg-[#f8f9fa] border border-[#D7DCE2] rounded-[12px] p-[5px] flex flex-col gap-[14px] lg:gap-[15px] w-[78px] lg:w-[87px] relative">
        {/* Layout Button */}
        <button
          onClick={onLayoutClick}
          className={`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${
            activeButton === 'layout'
              ? 'bg-[#3faee6]'
              : 'hover:bg-[#e9ecef]'
          }`}
        >
          <div className="w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center">
            <IconLayout selected={activeButton === 'layout'} />
          </div>
          <p className={`text-[14px] lg:text-[16px] font-normal ${activeButton === 'layout' ? 'text-white' : 'text-[#545865]'}`}>Layout</p>
        </button>

        {/* Huggy Button */}
        <button
          onClick={onHuggyClick}
          className={`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${
            activeButton === 'huggy'
              ? 'bg-[#3faee6]'
              : 'hover:bg-[#e9ecef]'
          }`}
        >
          <div className="w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center">
            <IconHuggy />
          </div>
          <p className={`text-[14px] lg:text-[16px] font-normal ${activeButton === 'huggy' ? 'text-white' : 'text-[#545865]'}`}>Huggy</p>
        </button>

        {/* Image Button */}
        <button
          onClick={onImageClick}
          className={`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${
            activeButton === 'image'
              ? 'bg-[#3faee6]'
              : 'hover:bg-[#e9ecef]'
          }`}
        >
          <div className="w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center">
            <IconImage selected={activeButton === 'image'} />
          </div>
          <p className={`text-[14px] lg:text-[16px] font-normal ${activeButton === 'image' ? 'text-white' : 'text-[#545865]'}`}>Image</p>
        </button>

        {/* Text Button */}
        <button
          onClick={onTextClick}
          className={`flex flex-col items-center gap-[3px] px-[12px] lg:px-[13px] py-[5px] rounded-[7px] transition-colors ${
            activeButton === 'text'
              ? 'bg-[#3faee6]'
              : 'hover:bg-[#e9ecef]'
          }`}
        >
          <div className="w-[29px] lg:w-[32px] h-[29px] lg:h-[32px] flex items-center justify-center">
            <IconText selected={activeButton === 'text'} />
          </div>
          <p className={`text-[14px] lg:text-[16px] font-normal ${activeButton === 'text' ? 'text-white' : 'text-[#545865]'}`}>Text</p>
        </button>

        {/* Layout Selector - positioned absolutely, aligned with Layout button */}
        {activeButton === 'layout' && (
          <LayoutSelector onSelectLayout={onSelectLayout} />
        )}

        {/* Huggy Menu - positioned absolutely next to sidebar */}
        {activeButton === 'huggy' && (
          <HuggyMenu
            onSelectHuggy={onSelectHuggy}
            onClose={() => onHuggyClick()}
          />
        )}

        {/* Text Hint Box - positioned absolutely, aligned with Text button */}
        {activeButton === 'text' && (
          <div className="text-hint absolute left-[calc(100%+4px)] bottom-[5px] bg-[#3faee6] rounded-[10px] p-[9px] lg:p-[10px] w-max">
            <p className="text-white text-[14px] lg:text-[16px] font-normal leading-normal">
              Click anywhere on the<br />canvas to add texts
            </p>
          </div>
        )}
      </div>
    </div>
  );
}