import { JSX } from 'preact/jsx-runtime'
import { ProblemId, SolutionStatus, UserId } from '../../shared/model'
import { Markdown } from './Markdown'
import { Select } from './Select'

const STATUS_SELECT_OPTIONS: Record<SolutionStatus, JSX.Element> = {
    ['pending']: <div class="pending">Soluzione in attesa di correzione</div>,
    ['correct']: <div class="correct">Soluzione corretta</div>,
    ['wrong']: <div class="wrong">Soluzione sbagliata</div>,
}

type Props = {
    sentBy?: UserId
    forProblem: ProblemId
    content: string
    status?: SolutionStatus
    adminControls: boolean
}

export const Solution = ({ sentBy, forProblem, content, status, adminControls }: Props) => {
    return (
        <div class={['solution', status].join(' ')}>
            <div class="solution-header">
                <div>
                    Soluzione
                    {sentBy && (
                        <>
                            {' '}
                            di <a href={`/user/${sentBy}`}>@{sentBy}</a>
                        </>
                    )}
                    {forProblem && (
                        <>
                            {' '}
                            per il <a href={`/problem/${forProblem}`}>Problema {forProblem}</a>
                        </>
                    )}
                </div>
            </div>
            <div class="solution-content">
                <Markdown source={content} />
            </div>
            {status && (
                <div class="solution-footer">
                    {/* <div class="row">
                        <div class="label">Stato</div>
                        <Select value={status} options={STATUS_SELECT_OPTIONS} />
                    </div> */}
                    <div class="row">
                        <div class="status-label">{STATUS_SELECT_OPTIONS[status]}</div>
                        {adminControls && (
                            <>
                                <button disabled={status === 'pending'} class="icon">
                                    <span class="material-symbols-outlined">hourglass_empty</span>
                                </button>
                                <button disabled={status === 'correct'} class="icon">
                                    <span class="material-symbols-outlined correct">
                                        check_circle
                                    </span>
                                </button>
                                <button disabled={status === 'wrong'} class="icon">
                                    <span class="material-symbols-outlined wrong">cancel</span>
                                </button>
                            </>
                        )}
                    </div>
                </div>
            )}
        </div>
    )
}