import { formatMessage } from '@theorchard/suite-frontend';
import React, { useState } from 'react';
import { useIsEmployeeShouldSeeSupportContactEmail } from 'shared/features';
import { formatTransferPricingCountry } from 'src/utils/format-transfer-pricing-country';
import { removeUnderscoresAndCapitalize } from 'src/utils/remove-underscores-and-capitalize';
import { sanitizeRelationshipNotes } from 'src/utils/sanitize-relationship-notes';
import type { FC } from 'react';
import type { LabelInfoProps } from 'src/types';
import type { Dictionaries } from './types';

export const CLASSNAME = 'InfoTable';
export interface Props {
    data?: LabelInfoProps | null;
    dictionaries: Dictionaries;
}

export const titleCell = (key: string) => (
    <p className="column-title">
        {key &&
            formatMessage(
                `labelInfo.components.propertyTitles.${key}`
            ).toUpperCase()}
    </p>
);

const InfoTable: FC<Props> = ({ data, dictionaries }) => {
    const [expanded, setExpanded] = useState(false);
    const isEmployeeShouldSeeSupportContactEmail =
        useIsEmployeeShouldSeeSupportContactEmail();
    const closers = data?.closerUsers?.map(user => String(user.id)) ?? [];
    const displayedClosers = expanded ? closers : closers.slice(0, 2);

    const getOptionValue = (
        key: string,
        value: string | number | { id: string }
    ) => {
        return (
            dictionaries[key]
                .find(({ value: val }) =>
                    value && typeof value === 'object'
                        ? String(val) === String(value?.id)
                        : String(val) === String(value)
                )
                ?.label.trim() || '-'
        );
    };

    const AccountManagementGridStartRowNumber =
        isEmployeeShouldSeeSupportContactEmail ? -1 : 0;

    return (
        <div className={CLASSNAME}>
            <div className={`${CLASSNAME}-content`}>
                <div className="account-info info-block">
                    <p className="title">Account Info</p>
                    <div className="properties">
                        {data && (
                            <>
                                <div className="GridTable">
                                    <div className="GridTable-container">
                                        <div
                                            className="GridTable-table"
                                            style={{
                                                gridTemplateColumns: `minmax(min-content, 1fr) minmax(min-content, 1fr)`,
                                            }}
                                        >
                                            <div className="GridTable-body">
                                                <div className="GridTable-row">
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 1,
                                                            gridRow: `1 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell('name')}
                                                        <p className="column-value font-weight-400">
                                                            {data?.name || '-'}
                                                        </p>
                                                    </div>
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 2,
                                                            gridRow: `1 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell('type')}
                                                        <p className="column-value font-weight-400">
                                                            {(data?.labelIdentifier &&
                                                                removeUnderscoresAndCapitalize(
                                                                    data.labelIdentifier
                                                                )) ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                </div>

                                                <div className="GridTable-row">
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 1,
                                                            gridRow: `2 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'ownedOperated'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {data?.isOwned ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 2,
                                                            gridRow: `2 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'isDistributor'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {data?.isDistributor
                                                                ? 'Yes'
                                                                : 'No'}
                                                        </p>
                                                    </div>
                                                </div>

                                                <div className="GridTable-row">
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 1,
                                                            gridRow: `3 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell('genre')}
                                                        <p className="column-value font-weight-400">
                                                            {data?.genre || '-'}
                                                        </p>
                                                    </div>
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 2,
                                                            gridRow: `3 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell('website')}
                                                        <p className="column-value font-weight-400">
                                                            {data?.website ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                </div>

                                                <div className="GridTable-row">
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 1,
                                                            gridRow: `4 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell('country')}
                                                        <p className="column-value font-weight-400">
                                                            {data?.country ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 2,
                                                            gridRow: `4 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell('region')}
                                                        <p className="column-value font-weight-400">
                                                            {data?.region ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                </div>

                                                <div className="GridTable-row">
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 1,
                                                            gridRow: `5 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'defaultSalesSheetTemplate'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {(data?.defaultSalesSheetTemplate &&
                                                                getOptionValue(
                                                                    'defaultSalesSheets',
                                                                    data?.defaultSalesSheetTemplate
                                                                )) ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 2,
                                                            gridRow: `5 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'estReleasesTracks'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {`${
                                                                data?.estReleases ||
                                                                0
                                                            }/${
                                                                data?.estTracks ||
                                                                0
                                                            }`}
                                                        </p>
                                                    </div>
                                                </div>

                                                <div className="GridTable-row">
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 1,
                                                            gridRow: `6 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'soundScanCodeUSA'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {data?.soundScanCodeUSA ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 2,
                                                            gridRow: `6 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'soundScanCodeCA'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {data?.soundScanCodeCA ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                </div>
                                                <div className="GridTable-row">
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 1,
                                                            gridRow: `7 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'firstStatementPeriod'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {data
                                                                ?.firstStatementPeriod
                                                                ?.statementPeriodName ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 2,
                                                            gridRow: `7 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'transferPricingCountry'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {data?.transferPricingCountry
                                                                ? formatTransferPricingCountry(
                                                                      data?.transferPricingCountry
                                                                  )
                                                                : '-'}
                                                        </p>
                                                    </div>
                                                </div>
                                                <div className="GridTable-row">
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 1,
                                                            gridRow: `8 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'serviceType'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {data
                                                                ?.activeVendorContract
                                                                ?.serviceType
                                                                ?.name || '-'}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="GridTable-row label-summary">
                                    <div className="GridTable-cell label-summary-title">
                                        {titleCell('labelSummary')}
                                        <p className="column-value font-weight-400">
                                            {data?.labelSummary || '-'}
                                        </p>
                                    </div>
                                </div>
                            </>
                        )}
                    </div>
                </div>
                <div className="account-management info-block">
                    <p className="title">Account Management</p>
                    <div className="properties">
                        {data && (
                            <div className="GridTable">
                                <div className="GridTable-container">
                                    <div
                                        className="GridTable-table"
                                        style={{
                                            gridTemplateColumns: `minmax(min-content, 1fr) minmax(min-content, 1fr)`,
                                        }}
                                    >
                                        <div className="GridTable-body">
                                            {!isEmployeeShouldSeeSupportContactEmail && (
                                                <div className="GridTable-row">
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 1,
                                                            gridRow: `1 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'contactName'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {data?.contactName ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumnStart: 2,
                                                            gridRow: `1 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'contactEmail'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {data?.supportContactEmail ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                </div>
                                            )}

                                            <div className="GridTable-row">
                                                <div
                                                    className="GridTable-cell"
                                                    style={{
                                                        gridColumnStart: 1,
                                                        gridRow: `${
                                                            AccountManagementGridStartRowNumber +
                                                            2
                                                        } / span 1`,
                                                    }}
                                                >
                                                    {titleCell(
                                                        'relationshipManager'
                                                    )}
                                                    <p className="column-value font-weight-400">
                                                        {(data?.assignedTo
                                                            ?.firstName &&
                                                            data?.assignedTo
                                                                ?.lastName &&
                                                            `${data?.assignedTo?.firstName} ${data?.assignedTo?.lastName}`) ||
                                                            '-'}
                                                    </p>
                                                </div>

                                                <div
                                                    className="GridTable-cell"
                                                    style={{
                                                        gridColumnStart: 2,
                                                        gridRow: `${
                                                            AccountManagementGridStartRowNumber +
                                                            2
                                                        } / span 1`,
                                                    }}
                                                >
                                                    {titleCell(
                                                        'productManager'
                                                    )}
                                                    <p className="column-value font-weight-400">
                                                        {data
                                                            ?.productManagerUser
                                                            ?.firstName &&
                                                        data?.productManagerUser
                                                            ?.lastName
                                                            ? `${data.productManagerUser.firstName} ${data.productManagerUser.lastName}${data.productManagerUser.active === false ? ' (inactive)' : ''}`
                                                            : '-'}
                                                    </p>
                                                </div>
                                            </div>

                                            <div className="GridTable-row">
                                                <div
                                                    className="GridTable-cell"
                                                    style={{
                                                        gridColumnStart: 1,
                                                        gridRow: `${
                                                            AccountManagementGridStartRowNumber +
                                                            3
                                                        } / span 1`,
                                                    }}
                                                >
                                                    {titleCell(
                                                        'secondaryRelationshipManager'
                                                    )}
                                                    <p className="column-value font-weight-400">
                                                        {(data?.quarterbackLabelManager &&
                                                            getOptionValue(
                                                                'quarterbackLabelManagers',
                                                                data?.quarterbackLabelManager
                                                            )) ||
                                                            '-'}
                                                    </p>
                                                </div>

                                                <div
                                                    className="GridTable-cell"
                                                    style={{
                                                        gridColumnStart: 2,
                                                        gridRow: `${
                                                            AccountManagementGridStartRowNumber +
                                                            3
                                                        } / span 1`,
                                                    }}
                                                >
                                                    {titleCell('owner')}
                                                    <p className="column-value font-weight-400">
                                                        {data?.owner || '-'}
                                                    </p>
                                                </div>
                                            </div>

                                            <div className="GridTable-row">
                                                <div
                                                    className="GridTable-cell"
                                                    style={{
                                                        gridColumnStart: 1,
                                                        gridRow: `${
                                                            AccountManagementGridStartRowNumber +
                                                            4
                                                        } / span 1`,
                                                    }}
                                                >
                                                    {titleCell(
                                                        'welcomeEmailDate'
                                                    )}
                                                    <p className="column-value font-weight-400">
                                                        {data?.welcomeEmailDate
                                                            ? 'Yes'
                                                            : 'No'}
                                                    </p>
                                                </div>

                                                <div
                                                    className="GridTable-cell"
                                                    style={{
                                                        gridColumnStart: 2,
                                                        gridRow: `${
                                                            AccountManagementGridStartRowNumber +
                                                            4
                                                        } / span 1`,
                                                    }}
                                                >
                                                    {titleCell('serviceTier')}
                                                    <p className="column-value font-weight-400">
                                                        {data?.serviceTier
                                                            ?.displayName ||
                                                            '-'}
                                                    </p>
                                                </div>
                                            </div>
                                            <div className="GridTable-row">
                                                <div
                                                    className="GridTable-cell"
                                                    style={{
                                                        gridColumnStart: 1,
                                                        gridRow: `${
                                                            AccountManagementGridStartRowNumber +
                                                            5
                                                        } / span 1`,
                                                    }}
                                                >
                                                    {titleCell(
                                                        'assignedReviewer'
                                                    )}
                                                    <p className="column-value font-weight-400">
                                                        {(data?.assignedReviewer
                                                            ?.firstName &&
                                                            data
                                                                ?.assignedReviewer
                                                                ?.lastName &&
                                                            `${data?.assignedReviewer?.firstName} ${data?.assignedReviewer?.lastName}`) ||
                                                            '-'}
                                                    </p>
                                                </div>
                                                <div
                                                    className="GridTable-cell"
                                                    style={{
                                                        gridColumnStart: 2,
                                                        gridRow: `${
                                                            AccountManagementGridStartRowNumber +
                                                            5
                                                        } / span 1`,
                                                    }}
                                                >
                                                    {titleCell(
                                                        'reviewContextNotes'
                                                    )}
                                                    <p className="column-value font-weight-400">
                                                        {data?.contentReviewNote ||
                                                            '-'}
                                                    </p>
                                                </div>
                                            </div>
                                            {isEmployeeShouldSeeSupportContactEmail && (
                                                <div className="GridTable-row">
                                                    <div
                                                        className="GridTable-cell"
                                                        style={{
                                                            gridColumn:
                                                                '2 span',
                                                            gridRow: `5 / span 1`,
                                                        }}
                                                    >
                                                        {titleCell(
                                                            'supportContactEmail'
                                                        )}
                                                        <p className="column-value font-weight-400">
                                                            {data?.supportContactEmail ||
                                                                '-'}
                                                        </p>
                                                    </div>
                                                </div>
                                            )}
                                            <div className="GridTable-row">
                                                <div
                                                    className="GridTable-cell"
                                                    style={{
                                                        gridColumnStart: 1,
                                                        gridRow: `${
                                                            AccountManagementGridStartRowNumber +
                                                            7
                                                        } / span 1`,
                                                    }}
                                                >
                                                    {titleCell('closer')}
                                                    <p className="column-value font-weight-400">
                                                        {dictionaries?.closers
                                                            ?.length === 0
                                                            ? '-'
                                                            : displayedClosers.length >
                                                                0
                                                              ? displayedClosers.map(
                                                                    (
                                                                        closer,
                                                                        index
                                                                    ) => (
                                                                        <span
                                                                            key={
                                                                                index
                                                                            }
                                                                        >
                                                                            {getOptionValue(
                                                                                'closers',
                                                                                closer
                                                                            )}
                                                                            {index <
                                                                            displayedClosers.length -
                                                                                1
                                                                                ? ', '
                                                                                : ''}
                                                                        </span>
                                                                    )
                                                                )
                                                              : '-'}
                                                        {dictionaries?.closers
                                                            ?.length > 0 &&
                                                            closers.length >
                                                                2 &&
                                                            !expanded && (
                                                                <span
                                                                    className="expand-more"
                                                                    onClick={() =>
                                                                        setExpanded(
                                                                            true
                                                                        )
                                                                    }
                                                                    style={{
                                                                        cursor: 'pointer',
                                                                        color: 'blue',
                                                                        marginLeft:
                                                                            '5px',
                                                                        fontSize:
                                                                            '0.8em',
                                                                    }}
                                                                >
                                                                    [...]
                                                                </span>
                                                            )}
                                                    </p>
                                                </div>
                                                <div
                                                    className="GridTable-cell"
                                                    style={{
                                                        gridColumnStart: 2,
                                                        gridRow: `${
                                                            AccountManagementGridStartRowNumber +
                                                            7
                                                        } / span 1`,
                                                    }}
                                                >
                                                    {titleCell('notes')}
                                                    <div className="column-value font-weight-400">
                                                        <div
                                                            dangerouslySetInnerHTML={{
                                                                __html: sanitizeRelationshipNotes(
                                                                    data?.relationshipNotes ||
                                                                        '-'
                                                                ),
                                                            }}
                                                        />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default InfoTable;