import React from 'react';
import {
    Col,
    Form,
    NumberInput,
    Row,
    SegmentedButton,
    Tooltip,
} from '@theorchard/suite-components';
import {
    CONTRACT_INTERVAL_TYPES,
    TOOLTIP_TERMINATION_NOTICE,
} from 'src/apollo/type-constants/contract';
import type {
    ContractLifecycle,
    ContractLifecycleSchedule,
} from 'src/types/abacus-contract-lifecycle';

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

export const TerminationNotice: React.FC<TerminationNoticePropTypes> = ({
    contractLifecycleSchedule,
    errors,
    handleFormChange,
    isDisabled = false,
    isEditForm = false,
}) => (
    <Row>
        <Col>
            <Form.Group>
                <Form.Label>Termination Notice Period</Form.Label>
                <div className="termination-notice-form">
                    <Tooltip
                        id="termination-notice-tooltip"
                        message={TOOLTIP_TERMINATION_NOTICE}
                        placement="left"
                        show={isEditForm ? false : undefined}
                        testId="termination-notice-tooltip"
                    >
                        <NumberInput
                            allowNegatives={false}
                            className={
                                errors.terminationNoticeDetailInterval
                                    ? 'error'
                                    : ''
                            }
                            disabled={isDisabled}
                            onChange={value =>
                                handleFormChange(
                                    'terminationNoticeDetailInterval',
                                    parseInt(value)
                                )
                            }
                            placeholder="e.g. 7"
                            testId="termination-notice-interval"
                            value={
                                contractLifecycleSchedule.terminationNoticeDetailInterval
                                    ? `${contractLifecycleSchedule.terminationNoticeDetailInterval}`
                                    : ''
                            }
                        />
                    </Tooltip>
                    <SegmentedButton
                        disabled={isDisabled}
                        onChange={value =>
                            handleFormChange(
                                'terminationNoticeDetailType',
                                value
                            )
                        }
                        testId="termination-notice-type"
                        value={
                            contractLifecycleSchedule.terminationNoticeDetailType &&
                            `${contractLifecycleSchedule.terminationNoticeDetailType}`
                        }
                        variant="primary"
                    >
                        <SegmentedButton.Text
                            id={CONTRACT_INTERVAL_TYPES.DAYS.value}
                        >
                            {CONTRACT_INTERVAL_TYPES.DAYS.label}
                        </SegmentedButton.Text>
                        <SegmentedButton.Text
                            id={CONTRACT_INTERVAL_TYPES.MONTHS.value}
                        >
                            {CONTRACT_INTERVAL_TYPES.MONTHS.label}
                        </SegmentedButton.Text>
                    </SegmentedButton>
                </div>
                <span className="error">
                    {errors.terminationNoticeDetailInterval}
                </span>
            </Form.Group>
        </Col>
    </Row>
);