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

export interface CollectionPeriodPropTypes {
    contractLifecycleSchedule: ContractLifecycleSchedule;
    errors: Partial<Contract> & Partial<ContractLifecycleSchedule>;
    handleFormChange: (
        formField: string,
        inputValue: number | string | null | undefined
    ) => void;
    isCollectionPeriodVisible: boolean;
    isDisabled: boolean;
    setIsCollectionPeriodVisible: (params: boolean) => void;
}

export const CollectionPeriod: React.FC<CollectionPeriodPropTypes> = ({
    contractLifecycleSchedule,
    errors,
    handleFormChange,
    isCollectionPeriodVisible,
    isDisabled = false,
    setIsCollectionPeriodVisible,
}) => {
    const handleSwitchChange = () => {
        if (isCollectionPeriodVisible) {
            const {
                collectionPeriodDetailInterval,
                collectionPeriodDetailType,
            } = contractLifecycleSchedule;
            handleFormChange(
                'collectionPeriodDetailType',
                collectionPeriodDetailType
            );
            handleFormChange(
                'collectionPeriodDetailInterval',
                collectionPeriodDetailInterval
            );
        }

        setIsCollectionPeriodVisible(!isCollectionPeriodVisible);
    };

    return (
        <>
            <Row>
                <Col>
                    <Switch
                        checked={isCollectionPeriodVisible}
                        disabled={isDisabled}
                        id="collectionPeriodSwitch"
                        label="There is a collection period"
                        name="hasCollectionPeriod"
                        testId="collection-period-switch"
                        onChange={handleSwitchChange}
                    />
                </Col>
            </Row>
            {isCollectionPeriodVisible && (
                <Row>
                    <Col>
                        <Form.Group>
                            <Form.Label>Collection Period</Form.Label>
                            <div className="collection-period-form">
                                <NumberInput
                                    allowNegatives={false}
                                    className={
                                        errors?.collectionPeriodDetailInterval
                                            ? 'error'
                                            : ''
                                    }
                                    disabled={isDisabled}
                                    onChange={value =>
                                        handleFormChange(
                                            'collectionPeriodDetailInterval',
                                            parseInt(value)
                                        )
                                    }
                                    placeholder="e.g. 1"
                                    testId="collection-period-interval"
                                    value={
                                        contractLifecycleSchedule.collectionPeriodDetailInterval
                                            ? `${contractLifecycleSchedule.collectionPeriodDetailInterval}`
                                            : ''
                                    }
                                />
                                <SegmentedButton
                                    disabled={isDisabled}
                                    onChange={value =>
                                        handleFormChange(
                                            'collectionPeriodDetailType',
                                            value
                                        )
                                    }
                                    testId="collection-period-type"
                                    value={
                                        contractLifecycleSchedule.collectionPeriodDetailType &&
                                        `${contractLifecycleSchedule.collectionPeriodDetailType}`
                                    }
                                    variant="primary"
                                >
                                    {Object.values(CONTRACT_INTERVAL_TYPES).map(
                                        intervalType => {
                                            return (
                                                <SegmentedButton.Text
                                                    id={intervalType.value}
                                                    key={intervalType.value}
                                                >
                                                    {intervalType.label}
                                                </SegmentedButton.Text>
                                            );
                                        }
                                    )}
                                </SegmentedButton>
                            </div>
                            <span className="error">
                                {errors?.collectionPeriodDetailInterval}
                            </span>
                        </Form.Group>
                    </Col>
                </Row>
            )}
        </>
    );
};