import React from 'react';
import {
    Col,
    DatePicker,
    Form,
    Row,
    Tooltip,
} from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import dayjs from 'dayjs';
import { TOOLTIP_CLIENT_NOTICE_DATE } from 'src/apollo/type-constants/contract';
import { currentDate } from 'src/utils/date-helpers';
import type { ContractLifecycle } from 'src/types/abacus-contract-lifecycle';
import { YYYY_MM_DD } from '@theorchard/accounting-apps-shared';

export interface TerminationFormFieldsPropTypes {
    /* eslint-disable no-unused-vars */
    contractInitialStartDate?: string;
    contractLifecycle: ContractLifecycle;
    errors: Partial<ContractLifecycle>;
    handleFormChange: (
        formField: string,
        inputValue: string | null | undefined
    ) => void;
    /* eslint-enable no-unused-vars */
}

export const TerminationFormFields: React.FC<
    TerminationFormFieldsPropTypes
> = ({
    contractInitialStartDate,
    contractLifecycle,
    errors,
    handleFormChange,
}) => {
    const currentPeriodEndDateRange = () => {
        let startDate = currentDate();
        let endDate = new Date(new Date().getFullYear() + 10, 11, 31)
            .toISOString()
            .slice(0, 10);

        if (dayjs(contractInitialStartDate).isValid())
            startDate = contractInitialStartDate!;
        else if (dayjs(contractLifecycle.lifecycleTermStart).isValid())
            startDate = contractLifecycle.lifecycleTermStart!;

        if (dayjs(contractLifecycle.lifecycleTermEnd).isValid())
            endDate = contractLifecycle.lifecycleTermEnd!;

        return {
            start: startDate,
            end: `${endDate}`,
        };
    };

    return (
        <>
            <Row>
                <Col>
                    <Form.Group>
                        <Form.Label>Client Notice Date</Form.Label>
                        <span className="ContractLifecycleTermination-optional-text">
                            (optional)
                        </span>
                        <Tooltip
                            id="clientNoticeDate"
                            message={TOOLTIP_CLIENT_NOTICE_DATE}
                            placement="top"
                            testId="clientNoticeDateTooltip"
                        >
                            <GlyphIcon name="info" size={12} />
                        </Tooltip>
                        <DatePicker
                            onChange={date =>
                                handleFormChange(
                                    'terminationNoticeReceived',
                                    date
                                )
                            }
                            placeholder={YYYY_MM_DD}
                            selectedValue={
                                contractLifecycle?.terminationNoticeReceived ||
                                undefined
                            }
                            testId="clientNoticeDate"
                        />
                    </Form.Group>
                </Col>
            </Row>
            <Row>
                <Col>
                    <Form.Group>
                        <Form.Label>Termination Date</Form.Label>
                        <DatePicker
                            className={
                                errors.terminationEffective
                                    ? 'ContractLifecycleTermination-error'
                                    : ''
                            }
                            customDateRange={currentPeriodEndDateRange()}
                            onChange={date =>
                                handleFormChange('terminationEffective', date)
                            }
                            placeholder={YYYY_MM_DD}
                            selectedValue={
                                contractLifecycle?.terminationEffective ||
                                undefined
                            }
                            testId="terminationDate"
                        />
                        <span
                            className="ContractLifecycleTermination-error-text"
                            data-testId="ContractLifecycleTerminationError"
                        >
                            {errors.terminationEffective}
                        </span>
                    </Form.Group>
                </Col>
            </Row>
        </>
    );
};