import React, { useState } from 'react';
import {
    Button,
    Col,
    Row,
    Section,
    Select,
} from '@theorchard/suite-components';
import { ContractMechanicalDeductionCard } from 'src/components/contract-detail/contract-mechanical-deduction-card';
import { ContractMechanicalDeductionFullscreenModal } from 'src/components/contract-mechanical-deduction-create/contract-mechanical-deduction-fullscreen-modal';
import RestrictedByAbacusProfileWrapper from 'src/components/restricted-by-abacus-profile-wrapper';
import { NO_CONTRACT_MECHANICAL_DEDUCTIONS } from 'src/constants';
import type { GetContractQuery } from 'src/apollo/queries/contract/__generated__/get-contract';
import { GlyphIcon } from '@theorchard/suite-icons';

type AbacusContract = NonNullable<GetContractQuery['abacusContract']>;
type AbacusContractMechDeductions =
    AbacusContract['mechanicalDeductions'] extends (infer T)[] | null
        ? T
        : null;

export interface ContractMechanicalDeductionsPropsTypes {
    contractId: string;
    mechanicalDeductions: AbacusContractMechDeductions[] | null;
}

export const ContractMechanicalDeductions: React.FC<
    ContractMechanicalDeductionsPropsTypes
> = ({ contractId, mechanicalDeductions }) => {
    const [
        isMechDeductionFullScreenModalOpen,
        setIsMechDeductionFullScreenModalOpen,
    ] = useState<boolean>(false);
    const [isWorldWide, setIsWorldWide] = useState<boolean>(false);

    const renderMechanicalDeductionsSectionContent = () => {
        if (!mechanicalDeductions || mechanicalDeductions.length === 0) {
            return (
                <div className="text-muted">
                    {NO_CONTRACT_MECHANICAL_DEDUCTIONS}
                </div>
            );
        }

        const columnSize = mechanicalDeductions.length <= 2 ? 6 : 4;

        const content = mechanicalDeductions.map(
            (mechanicalDeduction: AbacusContractMechDeductions) => (
                <Col
                    sm={columnSize}
                    key={mechanicalDeduction.contractMechanicalDeductionId}
                >
                    <ContractMechanicalDeductionCard
                        contractMechanicalDeduction={mechanicalDeduction}
                    />
                </Col>
            )
        );

        return <Row>{content}</Row>;
    };

    const AddButtonDropdown = () => (
        <Button
            disabled={
                !!(mechanicalDeductions && mechanicalDeductions.length === 3)
            }
            variant="primary"
        >
            <GlyphIcon name="plus" size={12} />
            Add
        </Button>
    );

    return (
        <>
            <Section
                className="ContractMechanicalDeductions-customCard"
                testId="contractMechanicalDeductionsCard"
            >
                <Section.Header>
                    <div
                        className="d-flex flex-column"
                        style={{ width: '100%' }}
                    >
                        <div className="d-flex flex-row align-items-center">
                            <Section.Title
                                className="h3"
                                testId="contractMechanicalDeductionsContainerTitle"
                            >
                                Mechanical Deductions
                            </Section.Title>
                            <RestrictedByAbacusProfileWrapper>
                                <Select
                                    className="ml-auto"
                                    components={{
                                        SelectInput: AddButtonDropdown,
                                    }}
                                    hideFilter
                                    testId="contractMechanicalDeductionsDropdownButton"
                                    width="auto"
                                    options={[
                                        {
                                            value: 'worldwide',
                                            label: 'Worldwide',
                                            disabled: !!(
                                                mechanicalDeductions &&
                                                mechanicalDeductions.length > 0
                                            ),
                                        },
                                        {
                                            value: 'individual',
                                            label: 'Individual Territory',
                                        },
                                    ]}
                                    onChange={option => {
                                        if (!option) return;
                                        setIsWorldWide(
                                            option.value === 'worldwide'
                                        );
                                        setIsMechDeductionFullScreenModalOpen(
                                            true
                                        );
                                    }}
                                />
                            </RestrictedByAbacusProfileWrapper>
                        </div>
                    </div>
                </Section.Header>
                <Section.Body>
                    <Section>
                        <Section.Body>
                            {renderMechanicalDeductionsSectionContent()}
                        </Section.Body>
                    </Section>
                </Section.Body>
            </Section>
            {isMechDeductionFullScreenModalOpen && (
                <ContractMechanicalDeductionFullscreenModal
                    contractId={contractId}
                    mechanicalDeductions={mechanicalDeductions}
                    setIsMechDeductionFullScreenModalOpen={
                        setIsMechDeductionFullScreenModalOpen
                    }
                    isWorldWide={isWorldWide}
                />
            )}
        </>
    );
};