import React from 'react';
import { Button, Field, Form, Select } from '@theorchard/suite-components';
import type { EarningsTransferModalScreen } from 'src/apollo/type-constants/contract-earnings-transfer';
import {
    EARNINGS_TRANSFER_MODAL_SCREENS,
    EARNINGS_TRANSFER_TYPES_LABELS,
} from 'src/apollo/type-constants/contract-earnings-transfer';
import type { AbacusEarningsTransferTypes as AbacusEarningsTransferTypesType } from 'src/apollo/definitions/globalTypes';
import { AbacusEarningsTransferTypes } from 'src/apollo/definitions/globalTypes';
import './styles.scss';

interface TransferTypeOption {
    label: string;
    value: AbacusEarningsTransferTypesType;
}

const TRANSFER_TYPE_OPTIONS: TransferTypeOption[] = Object.values(
    AbacusEarningsTransferTypes
)
    .filter(type => type !== 'NR_TRANSFER' && type !== 'CROSS_RECOUP')
    .map(value => ({
        label: EARNINGS_TRANSFER_TYPES_LABELS[value].name,
        subtitle: EARNINGS_TRANSFER_TYPES_LABELS[value].description,
        value,
    }));

export interface ContractEarningsTransferTypeScreenProps {
    isVisible: boolean;
    transferType: AbacusEarningsTransferTypesType | undefined;
    onTransferTypeChange: (
        type: AbacusEarningsTransferTypesType | undefined
    ) => void;
    setModalScreen: (screen: EarningsTransferModalScreen) => void;
}

export const ContractEarningsTransferTypeScreen: React.FC<
    ContractEarningsTransferTypeScreenProps
> = ({ isVisible, transferType, onTransferTypeChange, setModalScreen }) => {
    if (!isVisible) return null;

    const selectedOption = TRANSFER_TYPE_OPTIONS.find(
        o => o.value === transferType
    );

    return (
        <div className="ContractEarningsTransferTypeScreen">
            <Form.Group>
                <Field
                    controlId="earningsTransferType"
                    labelText="Transfer Type"
                >
                    <Select
                        className="ContractEarningsTransferTypeScreen-Select"
                        name="transferType"
                        hideClearButton={false}
                        placeholder="Select Transfer Type"
                        options={TRANSFER_TYPE_OPTIONS}
                        testId="earningsTransferTypeSelect"
                        menuWidth="100%"
                        selectedValue={selectedOption}
                        onChange={(option: TransferTypeOption | undefined) =>
                            onTransferTypeChange(option?.value)
                        }
                    />
                </Field>
            </Form.Group>
            <Button
                className="ContractEarningsTransferTypeScreen-NextButton"
                variant="primary"
                disabled={!transferType}
                onClick={() =>
                    setModalScreen(EARNINGS_TRANSFER_MODAL_SCREENS.CONFIGURE)
                }
                data-testid="earningsTransferNextButton"
            >
                Next
            </Button>
        </div>
    );
};