import get from 'lodash/get';
import React, { useContext } from 'react';
import { CreateCaseDispatchContext, CreateCaseStateContext } from '../../context/CreateCaseContext';
import { usePrevious } from '../../hooks/usePrevious';
import { ICreateCaseState, setCaseCreationDetails } from '../../reducers/CreateCaseReducer';
import CaseUtils from '../../utils/caseUtils';

interface IProps { }

export default function Fts(props: IProps) {
    const { createCaseState: {
        entitlement, severity, fts, contactInfo24X7
    } } = useContext(CreateCaseStateContext);
    const createCaseDispatch = useContext(CreateCaseDispatchContext);
    const oldFts = usePrevious(fts);
    const onCaseDetailsChange = (caseDetails: Partial<ICreateCaseState>) => {
        setCaseCreationDetails(createCaseDispatch, caseDetails);
    };

    if (oldFts !== fts) { onCaseDetailsChange({ contactInfo24X7: '' }); }

    const onFtsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        onCaseDetailsChange({ fts: e.target.checked });
    };
    const onFtsContactChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        onCaseDetailsChange({ contactInfo24X7: e.target.value });
    };

    return (<>{CaseUtils.showFts(get(entitlement, 'sla', ''), severity) && (<>
        <div className="form-group">
            <input type="checkbox" id="open-case-fts" name="open-case-fts" checked={fts} onChange={onFtsChange} />
            <label htmlFor="open-case-fts">24x7 Support</label>
        </div>
        <div className="form-group">
            <label htmlFor="open-case-support-level">24x7 Contact</label>
            <input type="text"
                id="open-case-support-level"
                className={`form-control`}
                name="open-case-support-level"
                value={contactInfo24X7}
                onChange={onFtsContactChange}
            />
        </div></>)}</>);
}
