import React from 'react';
import { Field, Form, Select } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import { capitalize } from 'lodash-es';
import { AbacusContractFlowthroughStatus } from 'src/apollo/definitions/globalTypes';
import type { AbacusContractFlowthroughUpdate } from 'src/apollo/definitions/globalTypes';

export interface ContractFlowthroughStatusProps {
    abacusContractFlowthrough: AbacusContractFlowthroughUpdate;
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    errors: any;
    handleFormChange: (
        // eslint-disable-next-line no-unused-vars
        fieldName: string,
        // eslint-disable-next-line no-unused-vars
        inputValue: string | null | undefined
    ) => void;
}

export const ContractFlowthroughStatus: React.FC<
    ContractFlowthroughStatusProps
> = ({ abacusContractFlowthrough, errors, handleFormChange }) => {
    const abacusContractFlowthroughStatuses = Object.values(
        AbacusContractFlowthroughStatus
    );

    const abacusContractFlowthroughStatusOptions =
        abacusContractFlowthroughStatuses.map(status => ({
            label: status === 'SHUTOFF' ? 'Shut-Off' : capitalize(status),
            value: status,
            icon: (
                <span className={`flowthrough-status-${status.toLowerCase()}`}>
                    <GlyphIcon name="dot" size={12} />
                </span>
            ),
        }));

    const selectedFlowthroughStatus =
        abacusContractFlowthroughStatusOptions.find(
            option =>
                option.value === abacusContractFlowthrough!.flowthroughStatus!
        );

    return (
        <>
            <Form.Group className="ContractFlowthroughFormFields-flowthrough-status">
                <Field
                    controlId="abacusContractFlowthroughStatus"
                    labelText="Status"
                    errorMessage={errors?.flowthroughStatus || undefined}
                    isRequired={true}
                >
                    <Select
                        testId="contractFlowthroughStatus"
                        menuWidth="100%"
                        name="abacusContractFlowthroughStatus"
                        hideClearButton={true}
                        selectedValue={selectedFlowthroughStatus?.value}
                        onChange={(
                            selectedOption:
                                | {
                                      label: string;
                                      value: AbacusContractFlowthroughStatus;
                                  }
                                | undefined
                        ) => {
                            handleFormChange(
                                'flowthroughStatus',
                                selectedOption?.value
                            );
                        }}
                        options={abacusContractFlowthroughStatusOptions}
                        placeholder="Select Status"
                    />
                </Field>
            </Form.Group>
        </>
    );
};