import { useId } from 'react';

import Tooltip from '@design-system/Tooltip';
import { Stack, Typography, useTheme } from '@mui/material';
import { IconInfoCircle } from '@tabler/icons-react';

import CheckboxBase from '../CheckboxBase';

import { type CheckboxProps } from './types';
import { getDescriptionColor, getLabelColor } from './utils';

const Checkbox = ({
  description,
  error = false,
  extraInfo,
  label,
  labelTooltip,
  readOnly,
  slotProps,
  ...props
}: CheckboxProps) => {
  const theme = useTheme();
  const newPalette = theme.palette?.new;
  const checkboxId = useId();

  const hoverBackgroundColor = newPalette?.action.background.neutral.hover;

  if (!label && !description && !extraInfo) {
    return (
      <CheckboxBase
        error={error}
        hoverBackgroundColor={hoverBackgroundColor}
        readOnly={readOnly}
        {...props}
      />
    );
  }

  return (
    <Stack sx={{ flexDirection: 'row' }}>
      <CheckboxBase
        id={checkboxId}
        error={error}
        hoverBackgroundColor={hoverBackgroundColor}
        readOnly={readOnly}
        sx={{ mt: 0.25 }}
        {...props}
        // Under readOnly the wrapping <label htmlFor> stays in place for
        // accessibility, but the browser synthesizes a click on the input
        // when the label is clicked. stopPropagation neutralizes that
        // phantom click so the parent (e.g. a clickable card) doesn't
        // receive a duplicate bubble alongside the label's own click.
        onClick={readOnly ? event => event.stopPropagation() : props.onClick}
      />
      <Stack
        component="label"
        htmlFor={checkboxId}
        sx={{
          pl: 0.75,
          cursor: props.disabled || readOnly ? 'default' : 'pointer',
        }}
      >
        {label && (
          <Stack
            sx={{
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              gap: 0.5,
            }}
          >
            <Typography
              variant="globalS"
              sx={{
                lineHeight: '24px',
                color: getLabelColor(theme, props.disabled, error),
              }}
            >
              {label}
            </Typography>
            {labelTooltip && (
              <Tooltip description={labelTooltip}>
                <IconInfoCircle size={13} />
              </Tooltip>
            )}
          </Stack>
        )}
        {description && (
          <Typography
            variant="globalXS"
            sx={{ color: getDescriptionColor(theme, props.disabled) }}
          >
            {description}
          </Typography>
        )}
      </Stack>

      {extraInfo && (
        <Typography
          variant="globalXS"
          {...slotProps?.extraInfo}
          sx={{
            color: getDescriptionColor(theme, props.disabled),
            ml: 'auto',
            ...slotProps?.extraInfo?.sx,
          }}
        >
          {extraInfo}
        </Typography>
      )}
    </Stack>
  );
};

export type { CheckboxProps };

export default Checkbox;
