import React, { useState, useReducer } from 'react';
import {
    Alert,
    Button,
    Field,
    Form,
    SegmentedButton,
} from '@theorchard/suite-components';
import { RouteLink, useIdentity } from '@theorchard/suite-frontend';
import cx from 'classnames';
import { isString } from 'lodash';
import { useForm } from 'react-hook-form';
import DeliveryStoresDropdown from 'src/components/deliveryStoresDropdown';
import ISRCUpload from 'src/components/isrcUpload/isrcUpload';
import { useCreateNrDeliveryOrderMutation } from 'src/data/mutations/createNrDeliveryOrder';
import { recordDeliveryStoreFilter } from 'src/utils/segment';
import type { SubmitHandler } from 'react-hook-form';
import type { OwnershipNrDeliveryOrderInput } from 'src/data/globalTypes';
import type { ParamValue } from 'src/utils/route';

export const CLASSNAME = 'CreateOwnershipOrder';
export const TRANSLATION_KEY = 'ownershipRights.createOwnershipOrder';

export interface FormFields {
    cmoId: string;
    territory: string;
}

const CreateOwnershipOrder = () => {
    const { roles } = useIdentity();
    const [showBy, setShowBy] = useState<'catalog' | 'isrc'>('catalog');
    const multipleRoles = roles && roles.length > 1;
    const [storeId, setStoreId] = useState<string | undefined>(undefined);
    const { setValue, getValues, handleSubmit } = useForm<FormFields>({
        mode: 'onSubmit',
    });
    const [isrcListFileUUID, setISRCListFileUUID] = useState<
        string | undefined
    >();
    const [canSubmit, updateCanSubmit] = useReducer(
        () =>
            !!(
                getValues().cmoId &&
                (showBy === 'catalog' ||
                    (showBy === 'isrc' && isrcListFileUUID))
            ),
        false
    );

    const { createNrDeliveryOrder, data, loading, error } =
        useCreateNrDeliveryOrderMutation({
            input: {
                cmmId: '',
                territory: '',
            },
        });

    const submitting = !!error || loading;

    const handleStoreChange = (
        value: string | Record<string, ParamValue | undefined>
    ) => {
        if (!value) setValue('cmoId', '');
        else if (isString(value)) setValue('cmoId', value);
        else {
            setValue('cmoId', value.store?.toString() ?? '');
            setValue('territory', value.territoryCode?.toString() ?? '');
        }
        recordDeliveryStoreFilter(getValues().cmoId);
        setStoreId(getValues().cmoId);
        updateCanSubmit();
    };

    const onSetISRCListFileUUID = (isrcListFileUUID: string | undefined) => {
        setISRCListFileUUID(isrcListFileUUID);
        updateCanSubmit();
    };

    const onSubmit: SubmitHandler<FormFields> = async formData => {
        const [cmmId] = formData.cmoId.split('-');
        const input: OwnershipNrDeliveryOrderInput = {
            cmmId,
            territory: formData.territory,
        };

        if (showBy === 'isrc' && isrcListFileUUID) {
            input.isrcListFileUUID = isrcListFileUUID;
        }

        await createNrDeliveryOrder({
            variables: {
                input,
            },
        });

        handleStoreChange('');
        setISRCListFileUUID(undefined);
        updateCanSubmit();
    };

    const WelcomeMessage = () => (
        <>
            <div className={`${CLASSNAME}-createOptionMessage`}>
                {$t(`${TRANSLATION_KEY}.selectServicesTitle`)}
            </div>
            <div className={`${CLASSNAME}-optionsMessage`}>
                {$t(`${TRANSLATION_KEY}.selectServicesDescription`)}
            </div>
        </>
    );

    const SuccessMessage = () => {
        if (data)
            return (
                <>
                    <div className={`${CLASSNAME}-createOptionMessage`}>
                        {$t(`${TRANSLATION_KEY}.orderSuccessAlertTitle`)}
                    </div>
                    <div className={`${CLASSNAME}-optionsMessage`}>
                        {$t(`${TRANSLATION_KEY}.trackOrderMessage`)}
                    </div>
                    <Alert
                        className={`${CLASSNAME}-createOptionMessage-success`}
                        variant="success"
                        testId="successMessage"
                        text={
                            <span>
                                {$t(
                                    `${TRANSLATION_KEY}.orderSuccessAlertMessage`,
                                    {
                                        orderId: data.id,
                                    }
                                )}
                            </span>
                        }
                    />
                </>
            );
        return null;
    };

    return (
        <div className={CLASSNAME}>
            <div className={`${CLASSNAME}-container`}>
                <div className={`${CLASSNAME}-welcome`}>
                    {!data && !error && <WelcomeMessage />}
                    {data && <SuccessMessage />}
                    {error && (
                        <>
                            <div className={`${CLASSNAME}-createOptionMessage`}>
                                {$t(`${TRANSLATION_KEY}.orderErrorAlertTitle`)}
                            </div>
                            <div className={`${CLASSNAME}-optionsMessage`}>
                                {$t(`${TRANSLATION_KEY}.errorOrderMessage`)}
                            </div>
                            <Alert
                                variant="error"
                                testId="errorMessage"
                                className={`${CLASSNAME}-createOptionMessage-error`}
                                text={$t(
                                    `${TRANSLATION_KEY}.orderErrorMessage`
                                )}
                            />
                        </>
                    )}
                </div>
                <div className={`${CLASSNAME}-segmented`}>
                    <SegmentedButton
                        onChange={id => setShowBy(id)}
                        value={showBy}
                        className={`${CLASSNAME}-segmentedButton`}
                        variant="primary"
                    >
                        <SegmentedButton.Text id="catalog">
                            Catalog
                        </SegmentedButton.Text>
                        <SegmentedButton.Text id="isrc">
                            ISRC
                        </SegmentedButton.Text>
                    </SegmentedButton>
                </div>
                <Form
                    className={`${CLASSNAME}-form`}
                    onSubmit={async e => {
                        await handleSubmit(onSubmit)(e);
                    }}
                >
                    {showBy === 'isrc' && (
                        <ISRCUpload
                            disabled={submitting}
                            onChange={onSetISRCListFileUUID}
                        />
                    )}
                    <Field
                        controlId="cmoId"
                        className="FormField wide service"
                        labelText={$t(`${TRANSLATION_KEY}.cmo`)}
                        testId="selectCmo"
                    >
                        <DeliveryStoresDropdown
                            data-testId="deliveryStoresDropdown"
                            placeholder={$t(`${TRANSLATION_KEY}.selectCmo`)}
                            onChange={value => handleStoreChange(value)}
                            storeId={storeId}
                            width={480}
                        />
                    </Field>
                    <div className={cx(`${CLASSNAME}-buttons`)}>
                        {multipleRoles && (
                            <div className="FormField">
                                <RouteLink
                                    routeId="nrOwnershipDelivery"
                                    data-testid="back-to-delivery-button"
                                    className={
                                        data
                                            ? `${CLASSNAME}-back-main-section-button`
                                            : `${CLASSNAME}-back-button`
                                    }
                                >
                                    {data
                                        ? $t(
                                              `${TRANSLATION_KEY}.backToMainSelection`
                                          )
                                        : $t(`${TRANSLATION_KEY}.back`)}
                                </RouteLink>
                            </div>
                        )}
                        <div className="FormField">
                            <Button
                                type="submit"
                                disabled={!canSubmit || submitting}
                                className={`${CLASSNAME}-submit-button`}
                                variant="primary"
                                data-testid="save-ownership-button"
                            >
                                {$t(`${TRANSLATION_KEY}.generateOrder`)}
                            </Button>
                        </div>
                    </div>
                </Form>
            </div>
        </div>
    );
};

export default CreateOwnershipOrder;