import React from 'react';
import {
    Col,
    DatePicker,
    Form,
    Row,
    Tooltip,
} from '@theorchard/suite-components';
import dayjs from 'dayjs';
import { AbacusContractLifecycleSchedulePeriodType } from 'src/apollo/definitions/globalTypes';
import {
    CURRENT_PERIOD_MAX_END_DATE,
    TOOLTIP_END_DATE,
} from 'src/apollo/type-constants/contract';
import { addInterval, currentDate } from 'src/utils/date-helpers';
import type {
    ContractLifecycle,
    ContractLifecycleSchedule,
} from 'src/types/abacus-contract-lifecycle';
import { YYYY_MM_DD } from '@theorchard/accounting-apps-shared';

export interface CurrentPeriodEndDatePropTypes {
    contractLifecycleSchedule: ContractLifecycleSchedule;
    errors: Partial<ContractLifecycle> & Partial<ContractLifecycleSchedule>;
    handleFormChange: (
        formField: string,
        inputValue: number | string | null | undefined
    ) => void;
    isDisabled?: boolean;
    isEditForm?: boolean;
    lifecycleTermStart: string | null;
}

export const CurrentPeriodEndDate: React.FC<CurrentPeriodEndDatePropTypes> = ({
    contractLifecycleSchedule,
    errors,
    handleFormChange,
    isDisabled = false,
    isEditForm = false,
    lifecycleTermStart,
}) => {
    const currentPeriodEndDateRange = () => {
        const START_DATE_LIMIT: number = 1;
        let startDate: string = addInterval(
            currentDate(),
            START_DATE_LIMIT,
            AbacusContractLifecycleSchedulePeriodType.DAY
        ) as string;

        if (
            dayjs(lifecycleTermStart).isValid() &&
            dayjs().isBefore(lifecycleTermStart, 'day')
        )
            startDate = addInterval(
                `${lifecycleTermStart}`,
                START_DATE_LIMIT,
                AbacusContractLifecycleSchedulePeriodType.DAY
            ) as string;

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

    return (
        <Row>
            <Col>
                <Form.Group>
                    <Form.Label>Current Period End Date</Form.Label>
                    <Tooltip
                        id="end-date-tooltip"
                        message={TOOLTIP_END_DATE}
                        placement="left"
                        show={isEditForm ? false : undefined}
                        testId="end-date-tooltip"
                    >
                        <DatePicker
                            className={errors.scheduleEnd ? 'error' : ''}
                            customDateRange={currentPeriodEndDateRange()}
                            disabled={isDisabled}
                            onChange={date =>
                                handleFormChange('scheduleEnd', date)
                            }
                            placeholder={YYYY_MM_DD}
                            selectedValue={
                                contractLifecycleSchedule.scheduleEnd || ''
                            }
                            testId="end-date-picker"
                        />
                        <span className="error">{errors.scheduleEnd}</span>
                    </Tooltip>
                </Form.Group>
            </Col>
        </Row>
    );
};