import React, { useState } from 'react';
import { Button, GlyphButton } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import EditFormSidecar from './components/edit-form-sidecar';
import RejectionSidecar from './components/rejection-sidecar';
import TaxDetailsESSidecar from './components/tax-details-es-sidecar';
import type { GlyphName12PX } from '@theorchard/suite-icons';
import type { GetAccountPayeeTaxFormInfoESQuery } from 'src/apollo/queries/__generated__/account-payee-tax-form-info-es';

interface TaxFormInfoHeaderSectionProps {
    className: string;
    accountId: string;
    accountPayeeId: string | undefined;
    countryOfTaxResidence?: string | null;
    taxEligibilityStateId?: string | null;
    showHeaderButtons?: boolean;
    enableEdit?: boolean;
    glyphIcon?: {
        name: GlyphName12PX;
        className: 'error' | 'warning' | 'success';
    };
    onOpenModal: () => void;
    isNonSpanishTaxResident: boolean;
    accountTaxInfoId?: string;
    taxInfoESData?: GetAccountPayeeTaxFormInfoESQuery;
}

const CLASS_NAME = 'TaxFormInfoHeaderSection';

export const TaxFormInfoHeaderSection: React.FC<
    TaxFormInfoHeaderSectionProps
> = ({
    className,
    accountId,
    accountPayeeId,
    countryOfTaxResidence,
    taxEligibilityStateId,
    showHeaderButtons,
    enableEdit,
    glyphIcon,
    onOpenModal,
    isNonSpanishTaxResident,
    accountTaxInfoId,
    taxInfoESData,
}) => {
    const [isCOTModalOpen, setIsCOTModalOpen] = useState(false);

    const renderGlyphIcon = () => {
        if (!glyphIcon) return null;
        const { className: glyphClass, name } = glyphIcon;

        return (
            <div>
                <div className={`circle-with-glyph ${glyphClass}`}>
                    <GlyphIcon name={name} size={12} />
                </div>
            </div>
        );
    };

    const renderSidecars = () => {
        const normalizedTaxEligibilityStateId =
            taxEligibilityStateId ?? undefined;

        return (
            <>
                {showHeaderButtons && (
                    <div className={`${className}-right`}>
                        {isNonSpanishTaxResident && accountTaxInfoId ? (
                            <>
                                <Button
                                    variant="primary"
                                    onClick={() => setIsCOTModalOpen(true)}
                                >
                                    <GlyphIcon name="plus" size={12} />
                                    Add Tax Details
                                </Button>
                                <TaxDetailsESSidecar
                                    accountId={accountId}
                                    isOpen={isCOTModalOpen}
                                    onRequestClose={() =>
                                        setIsCOTModalOpen(false)
                                    }
                                    taxInfoESData={taxInfoESData}
                                />
                            </>
                        ) : (
                            <>
                                <RejectionSidecar
                                    accountId={accountId}
                                    taxEligibilityStateId={
                                        normalizedTaxEligibilityStateId
                                    }
                                />
                                <Button variant="primary" onClick={onOpenModal}>
                                    <GlyphIcon name="plus" size={12} />
                                    Add Tax Form details
                                </Button>
                            </>
                        )}
                    </div>
                )}
                {enableEdit && (
                    <div className={`${className}-right`}>
                        {isNonSpanishTaxResident ? (
                            <>
                                <GlyphButton
                                    className="editButton"
                                    data-testid="openModalBtn"
                                    name="edit"
                                    onClick={() => setIsCOTModalOpen(true)}
                                    tooltip="edit"
                                    variant="secondary"
                                />
                                <TaxDetailsESSidecar
                                    accountId={accountId}
                                    isOpen={isCOTModalOpen}
                                    onRequestClose={() =>
                                        setIsCOTModalOpen(false)
                                    }
                                    taxInfoESData={taxInfoESData}
                                />
                            </>
                        ) : (
                            <EditFormSidecar
                                accountId={accountId}
                                countryOfTaxResidence={countryOfTaxResidence}
                                taxEligibilityStateId={
                                    normalizedTaxEligibilityStateId
                                }
                                accountPayeeId={accountPayeeId}
                            />
                        )}
                    </div>
                )}
            </>
        );
    };

    return (
        <div className={CLASS_NAME}>
            <div className="d-flex align-items-center">
                {renderGlyphIcon()}
                <div className="section-title">Tax Information</div>
            </div>
            {renderSidecars()}
        </div>
    );
};

export default TaxFormInfoHeaderSection;