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

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

export const RenewalTypeSelect: React.FC<RenewalTypeSelectPropTypes> = ({
    contractLifecycleSchedule,
    errors,
    handleFormChange,
    isDisabled = false,
    isEditForm = false,
    renewalTypeOptions,
}) => (
    <Row>
        <Col>
            <Form.Group>
                <Form.Label>Renewal Rules</Form.Label>
                <Tooltip
                    id="renewal-rules-tooltip"
                    message={TOOLTIP_RENEWAL_RULES}
                    placement="left"
                    show={isEditForm ? false : undefined}
                    testId="renewal-rules-tooltip"
                >
                    <Select
                        className={errors.renewalType ? 'error' : ''}
                        disabled={isDisabled}
                        name="renewalType"
                        onChange={selectedOption =>
                            handleFormChange(
                                'renewalType',
                                selectedOption?.value
                            )
                        }
                        options={renewalTypeOptions}
                        placeholder="Select Renewal Rules"
                        selectedValue={
                            contractLifecycleSchedule.renewalType || undefined
                        }
                        testId="renewal-type-select"
                        components={{
                            OptionWrapper: (
                                option: RenewalTypeSelectItem,
                                children: React.ReactNode
                            ) => (
                                <Tooltip
                                    data-testid={`${option.value}-tooltip`}
                                    id={`${option.value}-tooltip`}
                                    message={option.description}
                                    placement="left"
                                    show={isEditForm ? false : undefined}
                                >
                                    {children}
                                </Tooltip>
                            ),
                        }}
                    />
                    <span className="error">{errors.renewalType}</span>
                </Tooltip>
            </Form.Group>
        </Col>
    </Row>
);