// TODO: See if we can delete this file. This component appears to be unused, is only imported by its spec file.
import React, { useEffect, useState } from 'react';
import {
    Alert,
    Button,
    Col,
    Container,
    DatePicker,
    Form,
    Label,
    LoadingIndicator,
    Row,
    SegmentedButton,
} from '@theorchard/suite-components';
import { Link, useHistory, useParams } from 'react-router-dom';
import { useCreatePaymentHold } from 'src/apollo/mutations/payment-hold';
import { useAccountFullDetail } from 'src/apollo/queries/account';
import { usePaymentHold } from 'src/apollo/queries/payment-hold';
import { PageHeader } from 'src/components/shared/pageHeader';
import PaymentHoldHistory from 'src/components/shared/payment-hold-history';
import { DATE_FORMAT, HOLD_STATUSES } from 'src/constants';
import {
    selectPaymentTab,
    getAccountList,
    getAccountDetail,
} from 'src/urls/frontend-royalties';
import { paymentHoldFormValidation } from 'src/utils/form-validations';
import type { PaymentHoldHistoryType } from 'src/types/payment-hold';
import type { FormValidationError } from 'src/types/validation';
import './styles.scss';

const PaymentHoldForm = () => {
    const { ACTIVE, ON_HOLD } = HOLD_STATUSES;
    const [errors, setErrors] = useState<FormValidationError>({});
    const [formData, setFormData] = useState<Record<string, string>>({});
    const history = useHistory();
    const [holdStatus, setHoldStatus] = useState(ACTIVE);
    const [holdHistory, setHoldHistory] =
        useState<PaymentHoldHistoryType | null>([]);
    const [isOnHold, setIsOnHold] = useState(false);
    const { accountId } = useParams<{ accountId: string }>();

    const createPaymentPaymentHold = useCreatePaymentHold(accountId);
    const { data: account } = useAccountFullDetail(accountId);

    const {
        data: paymentHoldData,
        loading: isLoading,
        refetch,
    } = usePaymentHold(accountId);

    const changeHandler = (e: { target: { name: string; value: string } }) => {
        const {
            target: { name, value },
        } = e;
        setFormData({ ...formData, [name]: value });
        setErrors({});
    };

    const dateChangeHandler = (date?: string) =>
        changeHandler({ target: { name: 'startDate', value: date ?? '' } });

    const isFormVisible =
        (isOnHold && holdStatus === ACTIVE) ||
        (!isOnHold && holdStatus === ON_HOLD);

    const submitHandler = () => {
        const validation = paymentHoldFormValidation(formData);
        if (Object.keys(validation).length > 0) return setErrors(validation);

        createPaymentPaymentHold({
            // @ts-expect-error: ignore missing fields
            variables: { ...formData, isOnHold: !isOnHold, accountId },
        })
            .then(response => {
                if (response) {
                    refetch();
                    history.push(selectPaymentTab(accountId));
                }
            })
            .catch(err => setErrors({ serverError: err }));
    };

    useEffect(() => {
        if (paymentHoldData) {
            let onHoldDisplay = false;
            const detail = paymentHoldData.abacusPaymentHold;
            if (detail && detail.paymentHoldId) {
                const startDate = new Date(detail.startDate);
                const today = new Date(Date.now());

                onHoldDisplay =
                    startDate > today ? !detail.isOnHold : detail.isOnHold;
                setIsOnHold(onHoldDisplay);
                setHoldHistory(detail.paymentHoldHistory);
            }

            const status = onHoldDisplay ? ON_HOLD : ACTIVE;
            setHoldStatus(status);
        }
    }, [paymentHoldData]);

    return (
        <>
            <PageHeader
                title="Payment Eligibility"
                breadcrumbs={[
                    { label: 'Accounts', url: getAccountList },
                    {
                        label: account?.abacusAccount?.accountName,
                        url: getAccountDetail(accountId),
                    },
                    { label: 'Payment Eligibility' },
                ]}
            />
            <div className="PaymentHoldForm">
                {errors.serverError && (
                    <Alert variant="error" text={errors.serverError} />
                )}
                {isLoading ? (
                    <LoadingIndicator />
                ) : (
                    <Container className="payment-status">
                        <Row>
                            <Col sm={3}>
                                <Label text="Payment Status" />
                            </Col>
                            <Col className="d-flex">
                                <SegmentedButton
                                    onChange={value => setHoldStatus(value)}
                                    value={holdStatus}
                                    variant="primary"
                                >
                                    <SegmentedButton.Text id={ACTIVE}>
                                        {ACTIVE}
                                    </SegmentedButton.Text>
                                    <SegmentedButton.Text id={ON_HOLD}>
                                        {ON_HOLD}
                                    </SegmentedButton.Text>
                                </SegmentedButton>
                            </Col>
                        </Row>
                    </Container>
                )}
                {isFormVisible && (
                    <Container className="form">
                        <Row>
                            <Col sm={3}>
                                <Label text="Start Date" />
                            </Col>
                            <Col
                                className={errors.startDate && 'error'}
                                data-testid="start-date"
                            >
                                <DatePicker
                                    isClearable={true}
                                    placeholder={DATE_FORMAT}
                                    onChange={date => dateChangeHandler(date)}
                                    selectedValue={formData.startDate}
                                />
                                {errors.startDate && (
                                    <div className="form-errors">
                                        {errors.startDate}
                                    </div>
                                )}
                            </Col>
                        </Row>
                        <Row>
                            <Col sm={3}>
                                <Label text="Reason" />
                            </Col>
                            <Col>
                                <Form.Control
                                    as="textarea"
                                    className={`input ${errors.reason && 'error'}`}
                                    data-testid="input-reason"
                                    name="reason"
                                    onChange={e => changeHandler(e)}
                                    rows={3}
                                />
                                {errors.reason && (
                                    <span className="form-errors">
                                        {errors.reason}
                                    </span>
                                )}
                            </Col>
                        </Row>
                        <hr />
                        <Row className="PaymentHoldForm-buttons">
                            <Col sm={5} />
                            <Col>
                                <Link to={selectPaymentTab(accountId)}>
                                    <Button className="btn-cancel">
                                        Cancel
                                    </Button>
                                </Link>
                                <Button
                                    onClick={submitHandler}
                                    variant="primary"
                                >
                                    {isOnHold ? 'Remove Hold' : 'Place Hold'}
                                </Button>
                            </Col>
                        </Row>
                    </Container>
                )}
                <PaymentHoldHistory
                    holdHistory={holdHistory ?? []}
                    includeHeader
                />
            </div>
        </>
    );
};

export default PaymentHoldForm;