import React from 'react';
import { Button, Icon } from '../../components';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { Add, Close, Fullscreen } from '@mui/icons-material';
import { ControlContainer } from '../../components/controls';
import { Visualizations } from '../hooks';
import { VisualizationManagerType } from '../hooks';

type Props = {
  manager: VisualizationManagerType;
  fullSize: () => void;
};

export default function VisualizationBar({ manager, fullSize }: Props) {
  const handleDragStart = (e: React.DragEvent<HTMLDivElement>, visId: string) => {
    e.dataTransfer.setData('text/plain', visId);
  };

  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
  };

  const handleDrop = (e: React.DragEvent<HTMLDivElement>, dropVisId: string) => {
    e.preventDefault();
    const draggedVisId = e.dataTransfer.getData('text/plain');
    manager.reorderVisualizations({ draggedVisId, dropVisId });
    manager.changeActive(draggedVisId);
  };

  return (
    <div className="sticky shrink-0 top-0 flex items-stretch justify-between h-7 bg-secondary-100 border-b border-secondary-200 max-w-full">
      <div className="flex items-center">
        <h1 className="text-xs font-semibold text-secondary-600 px-2 truncate">Visualization</h1>
      </div>
      <div className="items-center shrink-0 px-0.5">
        <DropdownMenu.Root>
          <DropdownMenu.Trigger>
            <TooltipProvider delayDuration={0}>
              <Tooltip>
                <TooltipTrigger asChild>
                  <Button type="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
                </TooltipTrigger>
                <TooltipContent side={'top'}>
                  <p>Add visualization</p>
                </TooltipContent>
              </Tooltip>
            </TooltipProvider>
          </DropdownMenu.Trigger>
          <DropdownMenu.Portal>
            <DropdownMenu.Content className="bg-light p-1 rounded border">
              {Object.keys(Visualizations).map((key) => (
                <DropdownMenu.Item
                  key={key}
                  className="text-sm px-2 py-1 rounded cursor-pointer hover:bg-secondary-200"
                  onClick={(e) => {
                    manager.changeActive(key);
                  }}
                >
                  {key}
                </DropdownMenu.Item>
              ))}
            </DropdownMenu.Content>
          </DropdownMenu.Portal>
        </DropdownMenu.Root>
      </div>
      <div className="flex items-stretch divide-x divide-secondary-200 border-x border-secondary-200 overflow-x-auto -my-px">
        {manager.tabs.map((visId: string) => {
          const isActive = manager.activeVisualization === visId;
          return (
            <div
              key={visId}
              className={`flex items-center pl-2 pr-1 gap-1 cursor-pointer relative border-secondary-200 before:content-[''] before:absolute before:left-0 before:bottom-0 before:h-[2px] before:w-full ${isActive && 'before:bg-primary-500'} ${!isActive && 'before:bg-transparent hover:before:bg-secondary-300 hover:bg-secondary-200'}`}
              onClick={() => manager.changeActive(visId)}
              onDragStart={(e) => handleDragStart(e, visId)}
              onDragOver={(e) => handleDragOver(e)}
              onDrop={(e) => handleDrop(e, visId)}
              draggable
            >
              <p className={`text-xs text-secondary-500 font-semibold ${isActive && 'text-secondary-950'}`}>{visId}</p>
              <Button
                type="secondary"
                variant="ghost"
                rounded
                size="2xs"
                iconComponent={<Close />}
                onClick={(e) => {
                  e.stopPropagation();
                  manager.deleteVisualization(visId);
                }}
              />
            </div>
          );
        })}
      </div>
      <div className="shrink-0 sticky right-0 px-0.5 ml-auto items-center flex">
        <ControlContainer>
          <TooltipProvider delayDuration={0}>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button type="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={fullSize} />
              </TooltipTrigger>
              <TooltipContent side={'top'}>
                <p>Full screen</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </ControlContainer>
      </div>
    </div>
  );
}