import React, { useState } from 'react';
import {
    Button,
    ExpandableContent,
    TruncatedText,
} from '@theorchard/suite-components';
import { Page } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import LabeledItem from 'src/components/shared/labeled-item';
import type { GetContractByIdQuery } from 'src/apollo/queries/contract/__generated__/get-contract-by-id';
import type { GetContractAdvanceQuery } from 'src/apollo/queries/contract-advance/__generated__/get-contract-advance';

export interface AccountContractInformationPropsTypes {
    contractData?: GetContractByIdQuery;
    advanceData?: GetContractAdvanceQuery;
}

export const AccountContractInformation: React.FC<
    AccountContractInformationPropsTypes
> = ({ contractData, advanceData }) => {
    const [isExpanded, setIsExpanded] = useState(true);

    return (
        <div
            className="AccountContractInformation"
            data-testid="AccountContractInformation"
        >
            <div className="FormFieldsSection">
                <Page.Grid className="toggle-header">
                    <Page.Col sm={10}>
                        <h3>Account & Contract Information</h3>
                        <div className="smallBodyText">
                            These fields are a reference for the payment
                            approval process in Salesforce
                        </div>
                    </Page.Col>
                    <Page.Col sm={2} className="text-right">
                        <Button
                            variant="quartenary"
                            onClick={() => setIsExpanded(!isExpanded)}
                        >
                            {isExpanded ? (
                                <>
                                    Collapse
                                    <GlyphIcon name="chevronUp" size={16} />
                                </>
                            ) : (
                                <>
                                    Expand
                                    <GlyphIcon name="chevronDown" size={16} />
                                </>
                            )}
                        </Button>
                    </Page.Col>
                </Page.Grid>
                <ExpandableContent
                    expanded={isExpanded}
                    onToggle={setIsExpanded}
                >
                    <Page.Grid className="collaps-body">
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Account ID"
                                labelValue={
                                    contractData?.abacusContract?.account
                                        ?.accountId
                                }
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Account Name"
                                labelValue={
                                    <TruncatedText
                                        text={
                                            contractData?.abacusContract
                                                ?.account?.accountName ?? ''
                                        }
                                    />
                                }
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Contract ID"
                                labelValue={
                                    contractData?.abacusContract?.contractId
                                }
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Contract Name"
                                labelValue={
                                    contractData?.abacusContract?.contractName
                                }
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Advance ID"
                                labelValue={
                                    advanceData?.abacusContractAdvance
                                        ?.contractAdvanceId
                                }
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Payee Name"
                                labelValue={
                                    contractData?.abacusContract?.account
                                        ?.accountPayee?.payoneerPayeeName
                                }
                            />
                        </Page.Col>
                        <Page.Col sm={12} md={6} lg={3}>
                            <LabeledItem
                                labelName="Payee ID"
                                labelValue={
                                    contractData?.abacusContract?.account
                                        ?.accountPayee?.accountPayeeId
                                }
                            />
                        </Page.Col>
                    </Page.Grid>
                </ExpandableContent>
            </div>
        </div>
    );
};