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

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

export const RenewPeriodically: React.FC<RenewPeriodicallyPropTypes> = ({
    contractLifecycleSchedule,
    errors,
    handleFormChange,
    isDisabled = false,
    isEditForm = false,
}) => (
    <Row>
        <Col>
            <Form.Group>
                <Form.Label>Renew After</Form.Label>
                <div className="renew-offset-form">
                    <Tooltip
                        id="renew-offset-tooltip"
                        message={TOOLTIP_RENEW_AFTER}
                        placement="left"
                        show={isEditForm ? false : undefined}
                        testId="renew-offset-tooltip"
                    >
                        <NumberInput
                            allowNegatives={false}
                            className={
                                errors.renewalOffsetDetailInterval
                                    ? 'error'
                                    : ''
                            }
                            disabled={isDisabled}
                            onChange={value =>
                                handleFormChange(
                                    'renewalOffsetDetailInterval',
                                    parseInt(value)
                                )
                            }
                            placeholder="e.g. 1"
                            testId="renewal-offset-interval"
                            value={
                                contractLifecycleSchedule.renewalOffsetDetailInterval
                                    ? `${contractLifecycleSchedule.renewalOffsetDetailInterval}`
                                    : ''
                            }
                        />
                    </Tooltip>
                    <SegmentedButton
                        disabled={isDisabled}
                        onChange={value =>
                            handleFormChange('renewalOffsetDetailType', value)
                        }
                        testId="renewal-offset-type"
                        value={
                            contractLifecycleSchedule.renewalOffsetDetailType &&
                            `${contractLifecycleSchedule.renewalOffsetDetailType}`
                        }
                        variant="primary"
                    >
                        <SegmentedButton.Text
                            id={CONTRACT_INTERVAL_TYPES.MONTHS.value}
                        >
                            {CONTRACT_INTERVAL_TYPES.MONTHS.label}
                        </SegmentedButton.Text>
                        <SegmentedButton.Text
                            id={CONTRACT_INTERVAL_TYPES.YEARS.value}
                        >
                            {CONTRACT_INTERVAL_TYPES.YEARS.label}
                        </SegmentedButton.Text>
                    </SegmentedButton>
                </div>
                <span className="error">
                    {errors.renewalOffsetDetailInterval}
                </span>
            </Form.Group>
        </Col>
    </Row>
);