import type { ComponentProps } from 'react';
import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import { Button } from '../bootstrap';
import { Tooltip } from '../tooltip';
import type { ComponentBaseProps } from '../../types';
import type { GlyphName12PX, GlyphName16PX, GlyphName24PX } from '@theorchard/suite-icons';

type GlyphButtonNameSizeOptions =
    | {
          name: GlyphName24PX;
          size?: 'xl';
      }
    | {
          name: GlyphName16PX;
          size?: 'lg';
      }
    | {
          name: GlyphName12PX;
          size: 'sm';
      };

type GlyphButtonProps = ComponentBaseProps &
    Omit<ComponentProps<typeof Button>, 'glyph' | 'size'> & {
        tooltip?: string;
    } & GlyphButtonNameSizeOptions;

/**
 * GlyphButtons visually communicate actions that users can take. They should be used when the glyph is explicit enough as the text label only displays on hover, in a tooltip.
 *
 * @type atom
 * @status live
 * @tags buttons
 * @variantOf button
 */
export const GlyphButton: React.FC<GlyphButtonProps> = ({ name, size, tooltip, ...props }) => {
    const iconProps = (() => {
        if (size === 'sm') {
            return { name: name as GlyphName12PX, size: 12 as const };
        } else if (size === 'xl') {
            return { name: name as GlyphName24PX, size: 24 as const };
        } else {
            // Default case: size is 'lg' or undefined
            return { name: name as GlyphName16PX, size: 16 as const };
        }
    })();

    const Component = (
        <Button {...props} size={size === 'xl' ? 'lg' : size} glyph>
            <GlyphIcon {...iconProps} />
        </Button>
    );

    if (tooltip)
        return (
            <Tooltip id={`${name}-tooltip`} message={tooltip ?? ''}>
                {Component}
            </Tooltip>
        );

    return Component;
};