import React, {FC} from 'react';
import {VerticalStepStyle as S} from './vertical-step.style';
import {IVerticalStep as Props} from '.';

export const VerticalStepComponent: FC<Props> = ({
    title,
    subtitle,
    active,
    color,
    focus,
    size = 'md',
    disable,
    onSelect,
    noLine,
    children,
}) => {
    const isActive = active ? 'active' : '';
    const isFocus = focus ? 'focus' : '';
    const isDisable = disable ? 'disable' : '';
    const hasLine = noLine ? 'disappear' : '';

    const onClick = () => {
        if (!disable && onSelect) onSelect();
    };

    return (
        <S.Container color={color} className={`${size}`}>
            <S.StatusBox className={`${isDisable}`}>
                <S.Status
                    onClick={onClick}
                    className={`status ${isActive} ${isFocus} ${size} ${isDisable}`}
                >
                    {active && <S.Icon />}
                </S.Status>
                <S.Line className={`line ${isActive} ${hasLine}`} />
            </S.StatusBox>
            <S.Content className={`${size}`}>
                <S.Header onClick={onClick} className={`${size} ${isDisable}`}>
                    {title && (
                        <S.Title
                            className={`title ${size} ${isDisable} ${isFocus}`}
                            weight={600}
                        >
                            {title}
                        </S.Title>
                    )}
                    {subtitle && (
                        <S.Subtitle
                            className={`subtitle ${size} ${isDisable} ${isFocus}`}
                            weight={400}
                        >
                            {subtitle}
                        </S.Subtitle>
                    )}
                </S.Header>
                {children}
            </S.Content>
        </S.Container>
    );
};