import React, { useEffect, useState } from 'react';
import {
    Alert,
    Checkbox,
    Col,
    Container,
    Row,
    Form,
    Label,
} from '@theorchard/suite-components';
import cx from 'classnames';
import { isEmpty, trim } from 'lodash-es';
import { useHistory } from 'react-router-dom';
import { AbacusScheduleTargetType } from 'src/apollo/definitions/globalTypes';
import { useCreateSchedule } from 'src/apollo/mutations/schedule';
import { PopupModal } from 'src/components/shared/popup-modal';
import { AUTO_ADD_TEXT } from 'src/constants';
import { getContributorScheduleDetail } from 'src/urls/frontend-royalties';
import { requiredMessage } from 'src/utils/form-validations';

export interface AddScheduleFormPopupPropTypes {
    isAutoAddEnabled: boolean;
    isModalOpen: boolean;
    onCloseHandler: any;
    targetId: string;
    targetType: AbacusScheduleTargetType;
}

export const AddScheduleFormPopup: React.FC<AddScheduleFormPopupPropTypes> = ({
    isAutoAddEnabled,
    isModalOpen,
    onCloseHandler,
    targetId,
    targetType,
}) => {
    const [errors, setErrors] = useState<any>({});
    const [isAutoAddChecked, setIsAutoAddChecked] = useState<boolean>(false);
    const [isCreatingSchedule, setIsCreatingSchedule] =
        useState<boolean>(false);
    const [scheduleName, setScheduleName] = useState<string>('');
    const addSchedule = useCreateSchedule(targetId, targetType);
    const history = useHistory();

    const onChangeHandler = (e: any) => {
        setScheduleName(e.target.value);
        setErrors({});
    };

    const saveNewSchedule = () => {
        if (!trim(scheduleName))
            return setErrors({ scheduleName: requiredMessage('Name') });

        setErrors({});
        setIsCreatingSchedule(true);
        const variables = {
            conditions: { autoAdd: isAutoAddChecked },
            scheduleName: trim(scheduleName),
            targetId,
            targetType,
        };
        addSchedule({ variables })
            .then(({ data }) => {
                if (targetType === AbacusScheduleTargetType.CONTRIBUTOR)
                    history.push(
                        getContributorScheduleDetail(
                            targetId,
                            data?.createAbacusSchedule?.scheduleId
                        )
                    );
            })
            .catch(error => {
                setErrors({ serverError: error });
                setIsCreatingSchedule(false);
            });
    };

    useEffect(() => {
        if (isModalOpen) {
            setIsAutoAddChecked(false);
            setScheduleName('');
            setErrors({});
        }
    }, [isModalOpen]);

    const modalContent = (
        <div className="AddScheduleForm">
            {!isEmpty(errors?.serverError) && (
                <Alert
                    variant="error"
                    text={Object.values(errors.ServerError).toString()}
                />
            )}
            <Container>
                <Row>
                    <Col>
                        <Label text="Name" />
                    </Col>
                </Row>
                <Row>
                    <Col xs={12}>
                        <Form.Control
                            className={cx({
                                scheduleName: true,
                                error: !isEmpty(errors) && errors.scheduleName,
                            })}
                            data-testid="input-schedule-name"
                            name="scheduleName"
                            maxLength={180}
                            onChange={e => onChangeHandler(e)}
                            type="text"
                            value={scheduleName || ''}
                        />
                        {errors?.scheduleName ? (
                            <span className="error-msg">
                                {errors.scheduleName}
                            </span>
                        ) : null}
                    </Col>
                </Row>
                <Row>
                    <Col xs={12}>
                        <Form>
                            <Checkbox
                                testId="checkbox-auto-add"
                                disabled={!isAutoAddEnabled}
                                label={AUTO_ADD_TEXT}
                                name="autoAdd"
                                onChange={() =>
                                    setIsAutoAddChecked(!isAutoAddChecked)
                                }
                            />
                        </Form>
                    </Col>
                </Row>
            </Container>
        </div>
    );

    return (
        <PopupModal
            className="AddSchedule-popup"
            closeHandler={() => !isCreatingSchedule && onCloseHandler()}
            headerLabel={
                <h4 className="AddSchedule-popup-header ReactModal-popup-header">
                    New Schedule
                </h4>
            }
            isSaveButtonDisabled={isCreatingSchedule}
            isOpen={isModalOpen}
            modalContent={modalContent}
            saveHandler={saveNewSchedule}
            saveButtonText="Create"
        />
    );
};