import React from 'react';
import {
    Col,
    DatePicker,
    Form,
    Row,
    Tooltip,
    HelpTooltip,
} from '@theorchard/suite-components';
import {
    TOOLTIP_START_DATE,
    TOOLTIP_START_DATE_NOT_EDITABLE,
} from 'src/apollo/type-constants/contract';
import type {
    ContractLifecycle,
    ContractLifecycleSchedule,
} from 'src/types/abacus-contract-lifecycle';
import { YYYY_MM_DD } from '@theorchard/accounting-apps-shared';

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

export const CurrentPeriodStartDate: React.FC<
    CurrentPeriodStartDatePropTypes
> = ({
    errors,
    handleFormChange,
    lifecycleTermStart,
    isReadOnly = false,
    isDisabled = false,
}) => (
    <Row>
        <Col>
            <Form.Group>
                <span
                    style={{ display: 'flex' }}
                    className="align-items-baseline"
                >
                    <Form.Label>Current Period Start Date</Form.Label>
                    {isReadOnly && (
                        <HelpTooltip
                            id="start-current-period-date-tooltip"
                            message={TOOLTIP_START_DATE_NOT_EDITABLE}
                            tooltipPlacement="right"
                        />
                    )}
                </span>
                {!isReadOnly && (
                    <Tooltip
                        id="start-date-tooltip"
                        message={TOOLTIP_START_DATE}
                        placement="left"
                        testId="start-date-tooltip"
                    >
                        <DatePicker
                            className={errors.lifecycleTermStart ? 'error' : ''}
                            onChange={date =>
                                handleFormChange('lifecycleTermStart', date)
                            }
                            placeholder={YYYY_MM_DD}
                            selectedValue={lifecycleTermStart || undefined}
                            disabled={isDisabled}
                            testId="start-date-picker"
                        />
                        <span className="error">
                            {errors.lifecycleTermStart}
                        </span>
                    </Tooltip>
                )}
                {isReadOnly && <div>{lifecycleTermStart}</div>}
            </Form.Group>
        </Col>
    </Row>
);