import type { FC } from 'react';
import React from 'react';
import { GlyphIcon } from '@theorchard/suite-icons';
import cx from 'classnames';
import { Button } from '../bootstrap';
import type { ComponentBaseProps } from '../../types';
import type { ButtonProps } from '../bootstrap';
import type { GlyphName12PX } from '@theorchard/suite-icons';

export const CLASS_NAME = 'Stepper';
const CLASS_NAME_STEP = `${CLASS_NAME}-Step`;

type StepVariant = 'danger' | 'warning' | 'success' | 'info' | 'revision' | 'neutral' | 'solid';

interface StepAction extends ButtonProps {
    label: string;
}

interface StepIconBase {
    variant: StepVariant;
}
interface StepIconWithNumber extends StepIconBase {
    number: number;
    glyphIcon?: never;
}
interface StepIconWithGlyphIcon extends StepIconBase {
    glyphIcon: GlyphName12PX;
    number?: never;
}

type StepIcon = StepIconWithNumber | StepIconWithGlyphIcon;

export interface Step extends ComponentBaseProps {
    /**
     * Unique identifier for the step
     */
    id?: string;

    /**
     * Icon to be displayed on the step, can be a number or a GlyphIcon name
     */
    icon: StepIcon;
    /**
     * Title of the step
     */
    title: string;
    /**
     * Action button to be displayed next to the title
     */
    titleAction?: StepAction;
    /**
     * Description of the step
     */
    description?: React.ReactNode;
    /**
     * Body of the step
     */
    body?: React.ReactNode;
    /**
     * Action button to be displayed at the bottom of the step
     */
    action?: StepAction;
}

interface StepProps extends Step {
    /**
     * This should not be filled as it would inherit the layout from the Stepper
     */
    layout?: 'horizontal' | 'vertical';
}

export const Step: FC<StepProps> = ({
    id,
    className,
    testId = CLASS_NAME_STEP,
    layout,
    icon,
    title,
    titleAction,
    description,
    body,
    action,
}) => {
    const renderIcon = () => (
        <div className={`${CLASS_NAME_STEP}-icon variant-${icon.variant}`}>
            {icon.number ? (
                <span className={cx('number', `variant-${icon.variant}`)}>{icon.number}</span>
            ) : (
                <GlyphIcon name={icon.glyphIcon!} size={12} className={`variant-${icon.variant}`} />
            )}
        </div>
    );

    const renderContent = () => (
        <div className={`${CLASS_NAME_STEP}-content`}>
            <div className={`${CLASS_NAME_STEP}-title-row`}>
                <div className="title">{title}</div>
                {titleAction && (
                    <div className="title-action">
                        <Button {...titleAction}>{titleAction.label}</Button>
                    </div>
                )}
            </div>

            {description && <div className={`${CLASS_NAME_STEP}-description`}>{description}</div>}

            {body && <div className={`${CLASS_NAME_STEP}-body`}>{body}</div>}

            {action && (
                <div className={`${CLASS_NAME_STEP}-action`}>
                    <Button {...action}>{action.label}</Button>
                </div>
            )}
        </div>
    );

    return (
        <div className={cx(CLASS_NAME_STEP, `step-${id}`, className, layout)} data-testid={testId}>
            <div className={cx(`${CLASS_NAME_STEP}-header`, layout)}>
                {renderIcon()}
                <div className={`${layout}-line`} />
            </div>

            {renderContent()}
        </div>
    );
};

export default Step;