import { Modal, Button, Form } from "react-bootstrap"
import { FeatureRequest } from "../../../../types";

type Props = {
    isOpen: boolean,
    onClose: () => void,
    onChange: (option: FeatureRequest, active: boolean) => void,
    initialValues?: FeatureRequest[],
}

/** Modální dialog pro hlasování o nových funkcích. */
export default function FeaturesVotingModal({ isOpen, onClose, onChange, initialValues }: Readonly<Props>) {

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        onChange(e.currentTarget.value as FeatureRequest, e.currentTarget.checked);
    }

    return <Modal show={isOpen} onHide={onClose} size="lg">
        <Modal.Header closeButton>
            <Modal.Title>
                Hlasujte pro nové funkce
                <p style={{ fontSize: '12px' }}>Je možno vybrat maximálně 4 možnosti</p>
            </Modal.Title>
        </Modal.Header>
        <Modal.Body>
            {(Object.keys(FeatureRequest) as Array<keyof typeof FeatureRequest>).map(key => {
                return <Form.Check
                    key={key}
                    type='checkbox'
                    id={key}
                    label={FeatureRequest[key]}
                    onChange={handleChange}
                    value={key}
                    defaultChecked={initialValues?.includes(key as FeatureRequest)}
                />
            })}
            <p className="mt-3" style={{ fontSize: '12px' }}>Něco jiného? Dejte vědět.</p>
        </Modal.Body>
        <Modal.Footer>
            <Button variant="primary" onClick={onClose}>
                Zavřít
            </Button>
        </Modal.Footer>
    </Modal>
}