import React from 'react';
import {Link} from "react-router-dom";
import Typography from '../Typography/Typography';
import AlternativeTooltip from '../AlternativeTooltip/AlternativeTooltip';
import warning from '../../../assets/images/tooltip-warning.svg';
import ok from '../../../assets/images/tooltip-ok.svg';
import './setting-box.scss';
import {forceUppercase} from "../../../helpers/functions";
import certified from '../../../assets/images/certified.svg'

type SettingBoxProps =
    {
        title: string | null
        subtitle: string | null
        hypertitle?: string
        tooltip?: 'pending' | 'complete' | ''
        icon?: JSX.Element
        route: string
        requiresExtraAuth?: boolean
        info?: string
    }


/**
 * Used for services and settings in
 * /services, /application/*, /settings, etc...
 */
const ModuleBox = ({
                       hypertitle = "",
                       title,
                       subtitle,
                       tooltip = '',
                       icon,
                       route,
                       info,
                       requiresExtraAuth = false
                   }: SettingBoxProps) => {

    return (
        <Link to={route}>
            <div className={`setting-box ${requiresExtraAuth && 'requires-extra-auth'}`}>

                {tooltip === 'complete' &&
                    <AlternativeTooltip icon={ok} text={'Έχουν γίνει όλες οι απαραίτητες ενέργειες.'}/>}

                {tooltip === 'pending' &&
                    <AlternativeTooltip icon={warning} text={'Δεν έχουν γίνει όλες οι απαραίτητες ενέργειες.'}/>}
                <span className={'icon'}>{icon}</span>

                <div className='setting-box--text-container'>
                    <Typography className='change-on-hover hypertitle mb-2' fontSize={'10px'} fontWeight={'900'}
                                letterSpacing={'0.2px'}
                                tag={'p'}>{forceUppercase(hypertitle)}</Typography>
                    <Typography className='change-on-hover mb-1' fontSize={'20px'} fontWeight={'900'}
                                letterSpacing={'0.4px'}
                                color={'var(--title-color)'} tag={'p'}>{title}</Typography>
                    <Typography className='change-on-hover' fontSize={'16px'} fontWeight={'200'}
                                letterSpacing={'0.32px'} color={'var(--title-color)'} tag={'p'}>{subtitle}</Typography>

                    {
                        info && <p className='info-text'>{info}</p>
                    }
                </div>


                {requiresExtraAuth && <img className={'certified'} src={certified} width={60}/>}
            </div>
        </Link>
    );
}

export default ModuleBox;