import React, { useState } from 'react';
import { Button, Form, Field } from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { AbacusDag } from 'src/apollo/definitions/globalTypes';
import { useCreateSalesFile } from 'src/apollo/mutations/sales-file';
import { useDagRunTimesQuery } from 'src/apollo/queries/dag-run-times';
import RunTimerWithStatus from 'src/components/shared/run-timer-with-status';
import { getEligibleSalesValidation } from 'src/utils/form-validations';

export interface AddEligibleSalesFormPropTypes {
    periodId: string;
    refetchDetailsOnSalesAdd: () => void;
}

export const AddEligibleSalesForm: React.FC<AddEligibleSalesFormPropTypes> = ({
    periodId,
    refetchDetailsOnSalesAdd,
}) => {
    const [errors, setErrors] = useState<
        Partial<{
            fileDisplayName: string;
        }>
    >({});
    const [serverError, setServerError] = useState<string>('');
    const [fileDisplayName, setFileDisplayName] = useState<string>('');
    const [isSaving, setIsSaving] = useState<boolean>(false);

    const addSalesFile = useCreateSalesFile(parseInt(periodId, 10));
    const { data: dagRunTimesData } = useDagRunTimesQuery(
        AbacusDag.SALES_GET_ELIGIBLE
    );

    const avgRunTime =
        dagRunTimesData?.abacusDagRunTimes.averageRunTimeSeconds || 0;
    const p95RunningTime =
        dagRunTimesData?.abacusDagRunTimes.maxRunTimeSeconds || 0;

    const clearErrors = () => {
        setServerError('');
        setErrors({});
    };

    const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
        const {
            target: { value },
        } = e;
        clearErrors();
        setFileDisplayName(value);
    };

    const resetInputs = () => {
        setFileDisplayName('');
        clearErrors();
        setIsSaving(false);
    };

    const saveSalesFile = () => {
        const formErrors = getEligibleSalesValidation({ fileDisplayName });
        if (Object.keys(formErrors).length > 0) return setErrors(formErrors);
        setIsSaving(true);
        const variables = {
            accountingPeriodId: periodId,
            fileName: fileDisplayName,
        };
        return addSalesFile({ variables })
            .then(() => {
                refetchDetailsOnSalesAdd();
                resetInputs();
            })
            .catch(e => {
                if (Array.isArray(e))
                    setServerError(`Error: ${JSON.stringify(e)}`);
                else setServerError(`Error: ${String(e)}`);
                setIsSaving(false);
            });
    };

    return (
        <Page.Grid className="AddEligibleSalesForm">
            <Page.Col lg={6}>
                <Form.Group>
                    <Field
                        controlId="addSalesFileDisplayName"
                        errorMessage={errors.fileDisplayName}
                        labelText=""
                        isRequired
                    >
                        <input
                            className="AddEligibleSalesForm-input form-control"
                            disabled={isSaving}
                            name="AddEligibleSalesForm-input"
                            onChange={e => changeHandler(e)}
                            type="text"
                            placeholder="File Display Name"
                            value={fileDisplayName}
                        />
                    </Field>
                </Form.Group>
                {serverError && (
                    <span className="AddEligibleSalesForm-errorMsg">
                        {serverError}
                    </span>
                )}
            </Page.Col>
            <Page.Col lg={4}>
                <div className="AddEligibleSalesForm-eligibleSalesBtn">
                    <Button
                        data-testid="getEligibleSalesBtn"
                        disabled={isSaving}
                        id="getEligibleSalesBtn"
                        onClick={() => saveSalesFile()}
                    >
                        {isSaving ? (
                            <RunTimerWithStatus
                                displayText="Getting Sales"
                                avgRunTime={avgRunTime}
                                p95RunningTime={p95RunningTime}
                                tooltipLocation="bottom"
                            />
                        ) : (
                            <>GET ELIGIBLE SALES</>
                        )}
                    </Button>
                </div>
            </Page.Col>
        </Page.Grid>
    );
};