import React from 'react';
import { Button, DropdownTrigger, DropdownItemContainer, DropdownItem, Icon, DropdownContainer } from '../../components';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/tooltip';
import { Add, Close, Fullscreen } from '@mui/icons-material';
import { ControlContainer } from '../../components/controls';
import { Visualizations } from '../manager';
import { VisualizationManagerType } from '../manager';
import { Tabs, Tab } from '../../components/tabs';
import { Popover, PopoverContent, PopoverTrigger } from '../../components/layout/Popover';

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

export default function VisualizationBar({ manager, fullSize }: Props) {
  const [open, setOpen] = React.useState(false);

  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">
        <TooltipProvider delayDuration={0}>
          <Tooltip>
            <TooltipTrigger>
              <Popover open={open} onOpenChange={setOpen}>
                <PopoverTrigger onClick={() => setOpen((v) => !v)}>
                  <Button as={'a'} variantType="secondary" variant="ghost" size="xs" iconComponent={<Add />} onClick={() => {}} />
                </PopoverTrigger>
                <PopoverContent>
                  <div className="bg-light p-1 rounded border">
                    {Object.keys(Visualizations).map((key) => (
                      <DropdownItem
                        value={key}
                        key={key}
                        className="text-sm px-2 py-1 rounded cursor-pointer hover:bg-secondary-200"
                        onClick={(e) => {
                          manager.changeActive(key);
                          setOpen(false);
                        }}
                      ></DropdownItem>
                    ))}
                  </div>
                </PopoverContent>
              </Popover>
            </TooltipTrigger>
            <TooltipContent side={'top'}>
              <p>Add visualization</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </div>
      <Tabs>
        {manager.tabs.map((visId: string) => {
          const isActive = manager.activeVisualization === visId;
          return (
            <Tab
              key={visId}
              activeTab={isActive}
              text={visId}
              onClick={() => manager.changeActive(visId)}
              onDragStart={(e) => handleDragStart(e, visId)}
              onDragOver={(e) => handleDragOver(e)}
              onDrop={(e) => handleDrop(e, visId)}
              draggable
            >
              <Button
                variantType="secondary"
                variant="ghost"
                rounded
                size="2xs"
                iconComponent={<Close />}
                onClick={(e) => {
                  e.stopPropagation();
                  manager.deleteVisualization(visId);
                }}
              />
            </Tab>
          );
        })}
      </Tabs>
      <div className="shrink-0 sticky right-0 px-0.5 ml-auto items-center flex">
        <ControlContainer>
          <TooltipProvider delayDuration={0}>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button variantType="secondary" variant="ghost" size="xs" iconComponent={<Fullscreen />} onClick={fullSize} />
              </TooltipTrigger>
              <TooltipContent side={'top'}>
                <p>Full screen</p>
              </TooltipContent>
            </Tooltip>
          </TooltipProvider>
        </ControlContainer>
      </div>
    </div>
  );
}