import type { ReactNode } from 'react';
import type { SwitchProps } from './';

import useTheme from '~/src/hooks/useTheme';
import Switch from '.';
import Box from '../Box';
import InfoIcon from '../Icon/InfoIcon';
import { INPUT_LABEL_FONT_SIZE } from '../InputLabel';
import Tag from '../Tag';
import Text from '../Text';
import Tooltip from '../Tooltip';

export interface SwitchSettingProps extends SwitchProps {
  title: string;
  description?: string;
  disabledDescription?: string;
  margin?: string;
  isBeta?: boolean;
  /**
   * When provided, renders an info icon next to the switch that opens
   * a hover tooltip with this content. Useful for explaining the
   * reason a switch is disabled.
   */
  infoText?: ReactNode;
}

/**
 * <Switch> composed with a title and description,
 * ready use in any settings UI.
 */
const SwitchSetting = ({
  title,
  description,
  disabledDescription,
  margin,
  isBeta,
  infoText,
  ...switchProps
}: SwitchSettingProps) => {
  const theme = useTheme();

  return (
    <Box flexRow margin={margin} alignCenter>
      <Box flexGrow>
        <Text
          isBold
          size="1.35rem"
          color={theme.textColor70}
          letterSpacing={0.02}
        >
          {title}
          {isBeta && <Tag text="Beta" margin="0 0 0 .8rem" />}
        </Text>
        {description && (
          <Text
            margin="0.4rem 0 0 0"
            color={theme.textColor60}
            size={INPUT_LABEL_FONT_SIZE}
            letterSpacing={0.01}
            lineHeight={1.3}
          >
            {description}
          </Text>
        )}
      </Box>
      {infoText !== undefined && (
        <Box margin="0 1.2rem 0 1.2rem" flexRow alignCenter>
          <Tooltip content={infoText}>
            <InfoIcon size="1.6rem" color={theme.textColor60} />
          </Tooltip>
        </Box>
      )}
      <div
        title={switchProps.isDisabled ? disabledDescription : undefined}
        style={{ marginLeft: infoText !== undefined ? 0 : '3rem' }}
      >
        <Switch {...switchProps} />
      </div>
    </Box>
  );
};

export default SwitchSetting;