import { FC } from 'react';

import { TablerIcon } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';

import HuBadge from '@material-hu/components/design-system/Badge';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import Control from './Control';

export type ToggleProps = {
  isOff: boolean;
  offText: string;
  onText: string;
  permissionText?: string;
  highlightOff?: boolean;
  disabled?: boolean;
  hasPermission?: boolean;
  IconOff: TablerIcon;
  IconOn: TablerIcon;
  onToggle: () => void;
};

const Toggle: FC<ToggleProps> = ({
  isOff,
  offText,
  onText,
  permissionText,
  highlightOff = false,
  disabled = false,
  hasPermission = true,
  IconOff,
  IconOn,
  onToggle,
}) => {
  return (
    <HuTooltip
      disableTooltip={hasPermission || !permissionText}
      description={permissionText}
      slotProps={{
        arrow: {
          sx: {
            transform: 'translateX(172px) !important',
          },
        },
      }}
    >
      <Stack>
        <HuBadge
          badgeContent="!"
          color="warning"
          invisible={hasPermission}
        >
          <Control
            disabled={disabled}
            onClick={onToggle}
            {...(highlightOff &&
              isOff && { callButtonVariant: 'danger-secondary' })}
          >
            <HuTooltip
              disableTooltip={!hasPermission}
              description={isOff ? offText : onText}
            >
              <IconOff style={{ display: isOff ? 'block' : 'none' }} />
              <IconOn style={{ display: isOff ? 'none' : 'block' }} />
            </HuTooltip>
          </Control>
        </HuBadge>
      </Stack>
    </HuTooltip>
  );
};

export default Toggle;