import React, { useState } from 'react';

import { useOnViewportChange, useReactFlow, Viewport } from '@xyflow/react';

import {
  IconMaximize,
  IconMinus,
  IconPlus,
  IconLock,
  IconLockOpen,
} from '@material-hu/icons/tabler';
import ButtonGroup from '@material-hu/mui/ButtonGroup';
import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import { useLokaliseTranslation } from 'src/utils/i18n';

import { MAX_ZOOM } from '../utils';
import { MIN_ZOOM } from '../utils';

const CustomControlButton = ({
  Icon,
  onClick,
  tooltip,
  disabled = false,
}: {
  Icon: React.ElementType;
  onClick: () => void;
  tooltip: string;
  disabled?: boolean;
}) => {
  const handleClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    onClick();
  };

  return (
    <HuTooltip description={tooltip}>
      <Button
        variant="secondary"
        size="medium"
        sx={{ minWidth: 5, maxHeight: 35, p: 1 }}
        onClick={handleClick}
        disabled={disabled}
      >
        <Icon width={18} />
      </Button>
    </HuTooltip>
  );
};

const getZoom = (zoom: number) => Math.round(zoom * 100);

const CustomControls = ({
  setReadOnly,
}: {
  setReadOnly: (readOnly: boolean) => void;
}) => {
  const { t } = useLokaliseTranslation('workflows');
  const { zoomIn, zoomOut, fitView, getViewport } = useReactFlow();
  const [zoomLevel, setZoomLevel] = useState(getZoom(getViewport().zoom));
  const [isLocked, setIsLocked] = useState(false);

  useOnViewportChange({
    onChange: (viewport: Viewport) => setZoomLevel(getZoom(viewport.zoom)),
  });

  const toggleLockNodes = () => {
    setIsLocked(prev => !prev);
    setReadOnly(!isLocked);
  };

  const currentZoom = getViewport().zoom;
  const isMinZoom = currentZoom <= MIN_ZOOM;
  const isMaxZoom = currentZoom >= MAX_ZOOM;

  return (
    <Stack
      sx={{
        gap: 1,
        padding: 1,
        zIndex: 999,
        right: 16,
        bottom: 16,
        display: 'flex',
        position: 'fixed',
        flexDirection: 'row',
      }}
    >
      {/* Hidden feature for MVP */}
      {/* 
      <CustomControlButton
        onClick={resetNodePositions}
        Icon={IconSitemap}
        tooltip={t('reorder')}
        /> 
      */}
      <ButtonGroup>
        <CustomControlButton
          onClick={zoomOut}
          Icon={IconMinus}
          tooltip={t('zoom_out')}
          disabled={isMinZoom}
        />
        <Button
          disableRipple
          sx={{ minWidth: 5, maxHeight: 35, p: 1, cursor: 'default' }}
        >
          {zoomLevel}%
        </Button>
        <CustomControlButton
          onClick={zoomIn}
          Icon={IconPlus}
          tooltip={t('zoom_in')}
          disabled={isMaxZoom}
        />
      </ButtonGroup>
      <CustomControlButton
        onClick={fitView}
        Icon={IconMaximize}
        tooltip={t('fit_view')}
      />
      {isLocked && (
        <CustomControlButton
          onClick={toggleLockNodes}
          Icon={IconLock}
          tooltip={t('unlock')}
        />
      )}
      {!isLocked && (
        <CustomControlButton
          onClick={toggleLockNodes}
          Icon={IconLockOpen}
          tooltip={t('lock')}
        />
      )}
    </Stack>
  );
};

export default CustomControls;