import styles from './Steps.module.scss';
import { lockOpen, lockClosed, checkmarkCircle } from 'ionicons/icons';
import { IonIcon, IonItem } from '@ionic/react';
import StepDescription from './StepDescreption';

interface OwnProps {
    stepNumber: number;
    roundName: string;
    isUnlocked: boolean;
    showDescription?: boolean;
    buttonText: string;
    descriptionImage: string;
    link: string;
    isRoundCompleted: boolean;
    setDescription: (stepNumber: number) => void;
    // rename to select step
}

const Steps: React.FC<OwnProps> = (props) => {

    return (
        <IonItem lines='none' onClick={() => props.setDescription(props.stepNumber)}>

            {props.showDescription ? <StepDescription
                stepNumber={props.stepNumber}
                roundName={props.roundName}
                isUnlocked={props.isUnlocked}
                buttonText={props.buttonText}
                descriptionImage={props.descriptionImage}
                link={props.link}
                isRoundCompleted={props.isRoundCompleted}
            /> :
                <div className={styles.stepHolder}>
                    {/* <IonIcon icon={props.isUnlocked ? lockOpen : lockClosed} color={props.isUnlocked ? '' : "dark"} ></IonIcon> */}
                    {props.isUnlocked && !props.isRoundCompleted && <IonIcon icon={lockOpen}></IonIcon>}
                    {!props.isUnlocked && <IonIcon icon={lockClosed} color='dark'></IonIcon>}
                    {props.isRoundCompleted && <IonIcon icon={checkmarkCircle} className={styles.checkIcon}></IonIcon>}

                    <div className={styles.stepName}>
                        <div className={styles.step}>step {props.stepNumber}</div>
                        <h3 className={styles.heading}>{props.roundName}</h3>
                    </div>
                </div>

            }
        </IonItem>
    );
}

export default Steps;