import React from 'react';
import { Alert, Field, Form } from '@theorchard/suite-components';
import { isNil } from 'lodash-es';
import {
    ADD_SALESFORCE_ID_INFO_ALERT_MSG,
    SALESFORCE_USED,
} from 'src/components/advance-detail/constants';

export interface ContractAdminProps {
    changeHandler: (e: { target: { name: string; value: string } }) => void;
    disabled: boolean;
    isFeatureAbacusCreateAndApprovePaymentsEnabled?: boolean;
    lastModifiedByIdentityName: string | null | undefined;
    lastModified: string | undefined;
    salesforceId?: string | null;
    updateWorksheetPaymentAdvanceLoading: boolean;
    worksheetContractAdvancesTotalCount: number | undefined;
}

const ContractAdmin: React.FC<ContractAdminProps> = ({
    changeHandler,
    disabled,
    isFeatureAbacusCreateAndApprovePaymentsEnabled,
    lastModifiedByIdentityName,
    lastModified,
    salesforceId,
    updateWorksheetPaymentAdvanceLoading,
    worksheetContractAdvancesTotalCount,
}) => {
    const showSalesforceUsedAlert =
        salesforceId &&
        !isNil(worksheetContractAdvancesTotalCount) &&
        worksheetContractAdvancesTotalCount > 1;

    return (
        <div className="ContractAdmin">
            <Form>
                <h4>For Contract Admin</h4>
                <div className="step step-line">
                    <div>
                        <div className="circle">1</div>
                    </div>
                    <div className="payment">
                        <div className="payment-title">Add Salesforce ID</div>

                        {showSalesforceUsedAlert ? (
                            <Alert text={SALESFORCE_USED} variant="warn" />
                        ) : (
                            !disabled && (
                                <Alert
                                    text={ADD_SALESFORCE_ID_INFO_ALERT_MSG}
                                    variant="information"
                                />
                            )
                        )}
                        <Field
                            controlId="salesforceId"
                            labelText="Salesforce ID"
                            note={
                                lastModified && lastModifiedByIdentityName ? (
                                    <div className="FormControl-Note">
                                        <>
                                            <div className="FormControl-Note-item">
                                                <div>Added:</div>
                                                <div className="value">
                                                    {lastModified}
                                                </div>
                                            </div>
                                            <div className="FormControl-Note-item">
                                                <div>By:</div>
                                                <div className="value">
                                                    {lastModifiedByIdentityName}
                                                </div>
                                            </div>
                                        </>
                                    </div>
                                ) : (
                                    <></>
                                )
                            }
                        >
                            <Form.Control
                                data-testid="salesforceId"
                                disabled={
                                    updateWorksheetPaymentAdvanceLoading ||
                                    disabled ||
                                    !isFeatureAbacusCreateAndApprovePaymentsEnabled
                                }
                                name="salesforceId"
                                onChange={e => changeHandler(e)}
                                placeholder="Add ID here"
                                value={salesforceId || ''}
                            />
                        </Field>
                        <hr></hr>
                    </div>
                </div>
            </Form>
        </div>
    );
};

export default ContractAdmin;