import { FC } from 'react';

import Stack from '@material-hu/mui/Stack';
import { SxProps } from '@material-hu/mui/styles';

import HuPills from '@material-hu/components/design-system/Pills';
import HuFormSwitcher from '@material-hu/components/design-system/Switcher/form';
import HuTitle from '@material-hu/components/design-system/Title';
import HuTooltip from '@material-hu/components/design-system/Tooltip';

import useHuGoTheme from 'src/hooks/useHuGoTheme';

import { TOOLTIP_DELAY } from '../constants';

type TooltipProps = {
  title?: string;
  description?: string;
  direction?: 'top' | 'left' | 'right' | 'bottom';
  delay?: number;
};

type PillProps = {
  label: string;
  type:
    | 'error'
    | 'success'
    | 'warning'
    | 'info'
    | 'highlight'
    | 'neutral'
    | 'disabled';
};

type Props = {
  title: string;
  description: string;
  switcherName: string;
  isSwitcherDisabled?: boolean;
  pill?: PillProps;
  tooltip?: TooltipProps;
  switcherSx?: SxProps;
  titleSx?: SxProps;
};

const AugmentedSwitcher: FC<Props> = props => {
  const {
    title,
    description,
    switcherName,
    isSwitcherDisabled = false,
    pill = undefined,
    tooltip = undefined,
    switcherSx,
    titleSx,
  } = props;
  const { label: pillLabel, type: pillType } = pill || {};
  const {
    title: tooltipTitle,
    description: tooltipDescription,
    direction = 'top',
    delay = TOOLTIP_DELAY,
  } = tooltip || {};
  const HuGoThemeProvider = useHuGoTheme();

  return (
    <HuGoThemeProvider>
      <Stack
        sx={{
          alignItems: 'center',
          flexDirection: 'row',
          justifyContent: 'space-between',
          gap: 1,
        }}
      >
        <HuTitle
          variant="S"
          title={title}
          description={description}
          sx={titleSx}
        />
        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 2 }}>
          {pill?.label && (
            <HuPills
              label={pillLabel}
              type={pillType}
              hasIcon={false}
            />
          )}
          <HuTooltip
            title={tooltipTitle}
            description={tooltipDescription}
            direction={direction}
            delay={delay}
            disableTooltip={!tooltip}
          >
            <span>
              <HuFormSwitcher
                name={switcherName}
                switcherProps={{
                  title: '',
                  description: '',
                  disabled: isSwitcherDisabled,
                  sx: { ...switcherSx },
                }}
              />
            </span>
          </HuTooltip>
        </Stack>
      </Stack>
    </HuGoThemeProvider>
  );
};

export default AugmentedSwitcher;