import { IGroup } from '@rh-support/api';
import { IOption } from '@rh-support/types';
import { toOption, toOptions } from '@rh-support/utils';
import find from 'lodash/find';
import isEmpty from 'lodash/isEmpty';
import React, { useContext, useMemo, useState } from 'react';
import { AppMetadataStateContext } from '../../context/AppMetadataContext';
import { CreateCaseDispatchContext, CreateCaseStateContext } from '../../context/CreateCaseContext';
import { ICreateCaseState, setCaseCreationDetails } from '../../reducers/CreateCaseReducer';
import AlertMessage, { AlertType } from '../shared/AlertMessage';
import { Dropdown } from '../shared/input/DropdownList';

interface IProps { }

export default function GroupNEnhancedSLA(props: IProps) {
    const { createCaseState: { enhancedSLA, folderNumber } } = useContext(CreateCaseStateContext);
    const { appMetadataState: { loggedInUsersAccount, caseGroups } } = useContext(AppMetadataStateContext);
    const createCaseDispatch = useContext(CreateCaseDispatchContext);
    const [selectedCaseGroup, setSelectedCaseGroup] = useState<IGroup>(() => find(caseGroups.data, g => g.number === folderNumber));
    const [isCaseGroupInvalid, setCaseGroupInvalid] = useState(false);

    const onCaseDetailsChange = (caseDetails: Partial<ICreateCaseState>) => {
        setCaseCreationDetails(createCaseDispatch, caseDetails);
    };

    const onCaseGroupChange = (selection: IOption<IGroup>) => {
        setSelectedCaseGroup(selection.value);
        onCaseDetailsChange({ folderNumber: selection.value.number });
        validateCaseGroup(selection);
    };

    const onEnhancedSLAChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        onCaseDetailsChange({enhancedSLA: e.target.checked});
    };

    const validateCaseGroup = (selectedItem: IOption<IGroup>) => {
        setCaseGroupInvalid(isEmpty(selectedItem) || isEmpty(selectedItem.label) || selectedItem.value.number !== '-1');
    };

    return useMemo(() => {
        return (<>
            {loggedInUsersAccount.data.has_enhanced_sla && (<div className="form-group">
                <input
                    type="checkbox"
                    id="open-case-enhanced-sla"
                    name="open-case-enhanced-sla"
                    checked={enhancedSLA}
                    onChange={onEnhancedSLAChange}
                    disabled={!loggedInUsersAccount.data.has_available_enhanced_sla}
                />
                <label htmlFor="open-case-enhanced-sla">Enhanced SLA</label>
                <AlertMessage type={AlertType.DANGER} message="There are no remaining enhanced SLA's available" show={!loggedInUsersAccount.data.has_available_enhanced_sla} />
            </div>)}
            {loggedInUsersAccount.data.require_cgroup_on_create && (<div className="form-group">
                <label htmlFor="open-case-folder">Case Group <span className="form-required">&#42;</span></label>
                <Dropdown<IGroup>
                    id="open-case-folder"
                    name="open-case-folder"
                    placeholder="Select"
                    title={`Select Case Group`}
                    list={caseGroups.data ? toOptions<IGroup>(caseGroups.data, 'name') : []}
                    selectedItem={toOption<IGroup>(selectedCaseGroup, 'name')}
                    disabled={caseGroups.isError}
                    isLoadingList={caseGroups.isFetching}
                    onChange={onCaseGroupChange}
                    isInValid={caseGroups.isError || isCaseGroupInvalid}
                    onOuterClick={validateCaseGroup}
                />
            </div>)}
        </>);
    }, [props, enhancedSLA, folderNumber, loggedInUsersAccount.data, caseGroups]);
}
