import React from 'react';
import { Alert, Form } from '@theorchard/suite-components';
import { ReferenceSigningEntityMultiDropdown } from 'src/components/shared/reference-signing-entity-multi-dropdown';

import type { ReferenceSapProfitCenterCreateForm } from 'src/types/reference-sap-profit-center';

export interface ReferenceSapProfitCenterFormFieldsPropTypes {
    changeHandler: (
        fieldName: string,
        value: string | undefined | null | string[]
    ) => void;
    error: string | null;
    formData: Partial<ReferenceSapProfitCenterCreateForm>;
}

export const ReferenceSapProfitCenterFormFields: React.FC<
    ReferenceSapProfitCenterFormFieldsPropTypes
> = ({ changeHandler, error, formData }) => {
    return (
        <div className="SapProfitCenterForm">
            <Form validated>
                <Form.Group className="SapProfitCenterFormFields">
                    <Form.Label>Display Name</Form.Label>
                    <Form.Control
                        className="SapProfitCenterFormFields-Display-Name"
                        data-testid="displayName"
                        onChange={e =>
                            changeHandler('displayName', e?.target?.value)
                        }
                        type="text"
                        placeholder="Enter Display Name"
                        value={formData.displayName || ''}
                    />
                </Form.Group>

                <Form.Group className="SapProfitCenterFormFields">
                    <Form.Label>Profit Center</Form.Label>
                    <Form.Control
                        className="SapProfitCenterFormFields-Profit-Center"
                        data-testid="profitCenter"
                        maxLength={10}
                        onChange={e =>
                            changeHandler('profitCenter', e?.target?.value)
                        }
                        type="text"
                        placeholder="Enter Profit Center"
                        value={formData.profitCenter || ''}
                    />
                </Form.Group>

                <Form.Group className="SapProfitCenterFormFields">
                    <Form.Label>Company Code</Form.Label>
                    <Form.Control
                        className="SapProfitCenterFormFields-Company-Code"
                        data-testid="companyCode"
                        maxLength={8}
                        onChange={e =>
                            changeHandler('companyCode', e?.target?.value)
                        }
                        type="text"
                        placeholder="Enter Company Code"
                        value={formData.companyCode || ''}
                    />
                </Form.Group>

                <Form.Group className="SapProfitCenterFormFields">
                    <Form.Label>Business Group</Form.Label>
                    <Form.Control
                        className="SapProfitCenterFormFields-Business-Group"
                        data-testid="businessGroup"
                        maxLength={3}
                        onChange={e =>
                            changeHandler('businessGroup', e?.target?.value)
                        }
                        type="text"
                        placeholder="Enter Business Group"
                        value={formData.businessGroup || ''}
                    />
                </Form.Group>

                <Form.Group className="SapProfitCenterFormFields">
                    <Form.Label>Signing Entity</Form.Label>
                    <ReferenceSigningEntityMultiDropdown
                        id="signingEntity"
                        onChange={(e: any) =>
                            changeHandler(
                                'referenceSigningEntityIds',
                                e && e.map(({ value }: any) => value)
                            )
                        }
                        placeholder="Select Signing Entity"
                        value={
                            formData.referenceSigningEntityIds
                                ? formData.referenceSigningEntityIds.map(String)
                                : undefined
                        }
                        requireApply={false}
                        testId="signingEntityMultiSelect"
                    />
                </Form.Group>
            </Form>
            {error && (
                <Alert
                    className="SapProfitCenterForm-Error"
                    variant="error"
                    text={error}
                />
            )}
        </div>
    );
};

export default ReferenceSapProfitCenterFormFields;