import {
    Control,
    Form,
    MultiSelect,
    Select,
    Switch,
    Tooltip,
} from '@theorchard/suite-components';
import { formatMessage, useIdentity } from '@theorchard/suite-frontend';
import { GlyphIcon } from '@theorchard/suite-icons';
import dayjs from 'dayjs';
import React, { useMemo } from 'react';
import Editor, {
    BtnBold,
    BtnBulletList,
    BtnClearFormatting,
    BtnItalic,
    BtnLink,
    BtnNumberedList,
    BtnStrikeThrough,
    BtnUnderline,
    HtmlButton,
    Toolbar,
} from 'react-simple-wysiwyg';
import {
    useIsEmployeeAbleToEditServiceTier,
    useIsEmployeeShouldSeeSupportContactEmail,
} from 'shared/features';
import useLabelInfoConfig from 'src/config';
import { convertStyledSpansToSemanticHtml } from 'src/utils/convert-styled-spans-to-semantic-html';
import { changeSpacesToUnderscoresAndUppercase } from 'src/utils/formatted-string-spaces-to-underscores';
import { sanitizeRelationshipNotes } from 'src/utils/sanitize-relationship-notes';
import { getFilteredStatementPeriods } from 'src/utils/statement-periods';
import type { Dispatch, FC, ReactNode, SetStateAction } from 'react';
import type { VendorInput } from 'shared/data/schema';
import type {
    columnValue,
    Dictionaries,
    Dictionary,
} from 'src/components/infoTable/types';
export const CLASSNAME = 'EditTable';

const adminRoleId = 21;

export interface Props {
    labelData: VendorInput;
    setLabelData: Dispatch<SetStateAction<VendorInput>>;
    setVendorNoteData: Dispatch<
        SetStateAction<{ vendorId: string; note: string | null }>
    >;
    setVendorClosers: Dispatch<
        SetStateAction<{ vendorId: string; closers: string[] | [] }>
    >;
    setRelationshipNotes?: Dispatch<SetStateAction<string | undefined>>;
    hasErrors: boolean;
    dictionaries: Dictionaries;
    welcomeEmailDate: string | null;
    companyBrand?: string;
    roles?: { id: string; name: string }[];
    assignedTo?: {
        firstName?: string | null;
        lastName?: string | null;
    } | null;
    reviewContextNote?: string | null;
    closers?: string[] | [];
    firstStatementPeriodId?: string;
    setFirstStatementPeriodId?: (id: string | undefined) => void;
    paymentInterval?: string | undefined;
    statementPeriods?: {
        statementPeriodId: string;
        statementPeriodName: string;
    }[];
    relationshipNotes?: string | undefined | null;
}

export interface TableRowProps {
    leftKey?: string;
    rightKey?: string;
    leftValue?: ReactNode;
    rightValue?: ReactNode;
    rightTooltip?: ReactNode;
}

export const setField =
    (setFieldHandler: Dispatch<SetStateAction<VendorInput>>) =>
    (fieldName: string) =>
    (value?: string | number | boolean | object | null) =>
        setFieldHandler((d: VendorInput) => ({ ...d, [fieldName]: value }));

export const setNoteField =
    (
        setFieldHandler: Dispatch<
            SetStateAction<{ vendorId: string; note: string | null }>
        >
    ) =>
    (fieldName: keyof { vendorId: string; note: string | null }) =>
    (value?: string | null) =>
        setFieldHandler(prevVendorNoteData => ({
            ...prevVendorNoteData,
            [fieldName]: value,
        }));

export const setClosersField =
    (
        setFieldHandler: Dispatch<
            SetStateAction<{ vendorId: string; closers: string[] | [] }>
        >
    ) =>
    (fieldName: keyof { vendorId: string; closers: string[] | [] }) =>
    (value: string | string[] | []) =>
        setFieldHandler(prev => ({
            ...prev,
            [fieldName]: value,
        }));

export const tableRow = ({
    leftKey,
    rightKey,
    leftValue,
    rightValue,
    rightTooltip,
}: TableRowProps) => {
    return (
        <tr>
            <th>
                {leftKey &&
                    formatMessage(
                        `labelInfo.components.propertyTitles.${leftKey}`
                    )?.toUpperCase()}
            </th>
            <td className="rightMargin">{leftValue}</td>
            <th>
                {rightKey &&
                    formatMessage(
                        `labelInfo.components.propertyTitles.${rightKey}`
                    )?.toUpperCase()}
                {rightTooltip}
            </th>
            <td>{rightValue}</td>
        </tr>
    );
};

const initValueOfDropdown = (value: columnValue) => {
    return value ? String(value) : undefined;
};

const EditTable: FC<Props> = ({
    labelData,
    setLabelData,
    setVendorNoteData,
    setVendorClosers,
    hasErrors,
    dictionaries,
    roles,
    welcomeEmailDate,
    companyBrand,
    assignedTo,
    reviewContextNote,
    closers,
    firstStatementPeriodId,
    setFirstStatementPeriodId,
    paymentInterval,
    statementPeriods,
    setRelationshipNotes,
    relationshipNotes,
}) => {
    const RenderSelect = ({
        keyName,
        selectedValue,
        options,
        onChange,
        isDisabled = false,
    }: {
        keyName: string;
        selectedValue: columnValue;
        options: Dictionary;
        onChange: (v?: string) => void;
        isDisabled?: boolean;
    }) => {
        return (
            <Form.Control
                as="select"
                className={`${keyName}_select`}
                defaultValue={selectedValue || '0'}
                onChange={e => {
                    if (e.target.value === '0') {
                        return onChange(undefined);
                    }
                    return onChange(e.target.value);
                }}
                data-testid={`${keyName}_select`}
                disabled={isDisabled}
            >
                {keyName === 'assignedToId' &&
                assignedTo?.firstName ? undefined : (
                    <option value="0">Select</option>
                )}
                {options &&
                    options?.map(({ value, label }, index) => (
                        <option value={value} key={keyName + index}>
                            {label}
                        </option>
                    ))}
            </Form.Control>
        );
    };
    const setFieldWithDispatch = setField(setLabelData);
    const setVendorNoteWithDispatch = setNoteField(setVendorNoteData);
    const setVendorClosersWithDispatch = setClosersField(setVendorClosers);
    const identity = useIdentity();

    const adminRole = roles?.find(
        ({ id }: { id: string }) => Number(id) === adminRoleId
    );

    const parentCompany = useMemo(() => {
        const brand = dictionaries['companyBrands']?.find(
            brand => brand?.parentCompany?.uuid === labelData?.parentCompanyUuid
        );
        return brand?.parentCompany?.displayName;
    }, [dictionaries, labelData?.parentCompanyUuid]);

    const isEmployeeAbleToEditServiceTier =
        useIsEmployeeAbleToEditServiceTier();

    const isEmployeeShouldSeeSupportContactEmail =
        useIsEmployeeShouldSeeSupportContactEmail();

    const { editVendorOwner } = useLabelInfoConfig();

    const defaultSalesSheet = {
        key: 'defaultSalesSheetTemplate',
        value: (
            <RenderSelect
                keyName="defaultSalesSheetId"
                selectedValue={
                    // @ts-expect-error
                    labelData.defaultSalesSheetId
                }
                options={dictionaries['defaultSalesSheets']}
                onChange={defaultSalesSheetId =>
                    setFieldWithDispatch('defaultSalesSheetId')(
                        defaultSalesSheetId
                    )
                }
            />
        ),
    };

    const contactName = {
        key: 'contactName',
        value: (
            <Form.Control
                type="text"
                className="textField small"
                name="name"
                value={labelData?.contactName || ''}
                onChange={e =>
                    setFieldWithDispatch('contactName')(e.target.value)
                }
            />
        ),
    };

    const reviewContextNotes = {
        key: 'reviewContextNotes',
        value: (
            <Form.Control
                as="textarea"
                data-testid="reviewContextNotes"
                rows={3}
                className="textField small"
                name="reviewContextNotes"
                defaultValue={reviewContextNote || ''}
                onChange={e =>
                    setVendorNoteWithDispatch('note')(e.target.value)
                }
            />
        ),
    };

    const closer = {
        key: 'closer',
        value: (
            <MultiSelect
                testId="closerMultiSelect"
                options={dictionaries['closers']}
                selectedValue={closers}
                onChange={options => {
                    const selectedClosers = options.map(option => option.value);
                    setVendorClosersWithDispatch('closers')(selectedClosers);
                }}
            />
        ),
    };

    const serviceType = {
        key: 'serviceType',
        value: (
            <RenderSelect
                keyName="serviceTypeId"
                // @ts-expect-error
                selectedValue={initValueOfDropdown(labelData?.serviceTypeId)}
                options={dictionaries['serviceTypes']}
                onChange={serviceTypeId =>
                    setFieldWithDispatch('serviceTypeId')(serviceTypeId)
                }
            />
        ),
    };
    const firstStatementPeriod = {
        key: 'firstStatementPeriod',
        value: (
            <Select
                options={getFilteredStatementPeriods(
                    (statementPeriods || []).map(option => ({
                        statementPeriodId: option.statementPeriodId,
                        statementPeriodName: option.statementPeriodName,
                    })),
                    paymentInterval ?? ''
                )}
                onChange={option =>
                    setFirstStatementPeriodId?.(
                        option ? option.value : undefined
                    )
                }
                selectedValue={initValueOfDropdown(firstStatementPeriodId)}
                testId="firstStatementPeriod"
            />
        ),
    };

    const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
        const html = e.clipboardData.getData('text/html');
        if (html) {
            e.preventDefault();
            const convertedHtml = convertStyledSpansToSemanticHtml(html);
            const sanitizedHtml = sanitizeRelationshipNotes(convertedHtml);
            document.execCommand('insertHTML', false, sanitizedHtml);
        }
    };

    return (
        <div className={CLASSNAME}>
            <div className={`${CLASSNAME}-content`}>
                <div className="account-info info-block">
                    <p className="title">Account Info</p>
                    <div className="properties">
                        <table>
                            <tbody>
                                {tableRow({
                                    leftKey: 'parentCompany',
                                    leftValue: (
                                        <Control
                                            errorMessage={
                                                !labelData.parentCompanyUuid &&
                                                hasErrors
                                                    ? 'Value is required. Specify company first'
                                                    : undefined
                                            }
                                        >
                                            <Form.Control
                                                type="text"
                                                disabled
                                                className="textField small"
                                                name="parentCompany"
                                                defaultValue={parentCompany}
                                            />
                                        </Control>
                                    ),
                                    rightKey: 'company',
                                    rightValue: (
                                        <Control
                                            errorMessage={
                                                !labelData.companyBrandId &&
                                                hasErrors
                                                    ? 'Value is required'
                                                    : undefined
                                            }
                                        >
                                            <RenderSelect
                                                keyName="company"
                                                selectedValue={initValueOfDropdown(
                                                    labelData?.companyBrandId
                                                )}
                                                options={
                                                    dictionaries[
                                                        'companyBrands'
                                                    ]
                                                }
                                                onChange={brandUuid => {
                                                    const brand = dictionaries[
                                                        'companyBrands'
                                                    ].find(
                                                        ({ value }) =>
                                                            value === brandUuid
                                                    );
                                                    setFieldWithDispatch(
                                                        'companyBrandId'
                                                    )(brandUuid);
                                                    setFieldWithDispatch(
                                                        'parentCompanyUuid'
                                                    )(
                                                        brand?.parentCompany
                                                            ?.uuid
                                                    );
                                                }}
                                            />
                                        </Control>
                                    ),
                                })}
                                {tableRow({
                                    leftKey:
                                        isEmployeeShouldSeeSupportContactEmail
                                            ? defaultSalesSheet.key
                                            : contactName.key,
                                    leftValue:
                                        isEmployeeShouldSeeSupportContactEmail
                                            ? defaultSalesSheet.value
                                            : contactName.value,
                                    rightKey: 'type',
                                    rightValue: (
                                        <RenderSelect
                                            keyName="labelIdentifier"
                                            selectedValue={initValueOfDropdown(
                                                labelData?.labelIdentifier &&
                                                    changeSpacesToUnderscoresAndUppercase(
                                                        labelData.labelIdentifier
                                                    )
                                            )}
                                            options={
                                                dictionaries['labelIdentifiers']
                                            }
                                            onChange={setFieldWithDispatch(
                                                'labelIdentifier'
                                            )}
                                        />
                                    ),
                                })}
                                {tableRow({
                                    leftKey: 'ownedOperated',
                                    leftValue: (
                                        <Switch
                                            className="custom-switch"
                                            id="isOwned"
                                            checked={
                                                String(labelData?.isOwned) ===
                                                    'Yes' ||
                                                labelData?.isOwned === true
                                            }
                                            onChange={() => {
                                                setFieldWithDispatch('isOwned')(
                                                    !(
                                                        String(
                                                            labelData?.isOwned
                                                        ) === 'Yes' ||
                                                        labelData?.isOwned ===
                                                            true
                                                    )
                                                );
                                            }}
                                        />
                                    ),
                                    rightKey: 'genre',
                                    rightValue: (
                                        <RenderSelect
                                            keyName="primaryGenreId"
                                            selectedValue={initValueOfDropdown(
                                                labelData?.primaryGenreId
                                            )}
                                            options={dictionaries['genres']}
                                            onChange={genre =>
                                                setFieldWithDispatch(
                                                    'primaryGenreId'
                                                )(Number(genre))
                                            }
                                        />
                                    ),
                                })}
                                {tableRow({
                                    leftKey: 'website',
                                    leftValue: (
                                        <Form.Control
                                            type="text"
                                            className="textField small"
                                            placeholder="https://"
                                            name="website"
                                            value={labelData.website || ''}
                                            onChange={e =>
                                                setFieldWithDispatch('website')(
                                                    e.target.value
                                                )
                                            }
                                        />
                                    ),
                                    rightKey: 'country',
                                    rightValue: (
                                        <RenderSelect
                                            keyName="countryId"
                                            selectedValue={initValueOfDropdown(
                                                labelData?.countryId
                                            )}
                                            options={dictionaries['countries']}
                                            onChange={countryId =>
                                                setFieldWithDispatch(
                                                    'countryId'
                                                )(Number(countryId))
                                            }
                                        />
                                    ),
                                })}
                                {tableRow({
                                    leftKey: 'region',
                                    leftValue: (
                                        <RenderSelect
                                            keyName="regionId"
                                            selectedValue={initValueOfDropdown(
                                                labelData?.regionId
                                            )}
                                            options={dictionaries['regions']}
                                            onChange={reg =>
                                                setFieldWithDispatch(
                                                    'regionId'
                                                )(Number(reg))
                                            }
                                        />
                                    ),
                                    rightKey: 'estReleasesTracks',
                                    rightValue: (
                                        <div className="releases-tracks-inputs">
                                            <Form.Control
                                                type="number"
                                                className="textField small"
                                                name="estReleases"
                                                value={
                                                    labelData?.estimatedTotalProducts ||
                                                    0
                                                }
                                                onChange={e =>
                                                    setFieldWithDispatch(
                                                        'estimatedTotalProducts'
                                                    )(Number(e.target.value))
                                                }
                                            />
                                            <Form.Control
                                                type="number"
                                                className="textField small"
                                                name="estTracks"
                                                value={
                                                    labelData?.estimatedTotalTracks ||
                                                    0
                                                }
                                                onChange={e =>
                                                    setFieldWithDispatch(
                                                        'estimatedTotalTracks'
                                                    )(Number(e.target.value))
                                                }
                                            />
                                        </div>
                                    ),
                                })}
                                {tableRow({
                                    leftKey: 'soundScanCodeUSA',
                                    leftValue: (
                                        <Form.Control
                                            type="text"
                                            className="textField small"
                                            name="soundScanCodeUSA"
                                            value={
                                                labelData.soundScanCodeUSA || ''
                                            }
                                            onChange={e =>
                                                setFieldWithDispatch(
                                                    'soundScanCodeUSA'
                                                )(e.target.value)
                                            }
                                        />
                                    ),
                                    rightKey: 'soundScanCodeCA',
                                    rightValue: (
                                        <Form.Control
                                            type="text"
                                            className="textField small"
                                            name="soundScanCodeCA"
                                            value={
                                                labelData.soundScanCodeCA || ''
                                            }
                                            onChange={e =>
                                                setFieldWithDispatch(
                                                    'soundScanCodeCA'
                                                )(e.target.value)
                                            }
                                        />
                                    ),
                                })}

                                {!isEmployeeShouldSeeSupportContactEmail &&
                                    tableRow({
                                        leftKey: defaultSalesSheet.key,
                                        leftValue: defaultSalesSheet.value,
                                        rightKey: serviceType.key,
                                        rightValue: serviceType.value,
                                    })}

                                {isEmployeeShouldSeeSupportContactEmail &&
                                    tableRow({
                                        leftKey: serviceType.key,
                                        leftValue: serviceType.value,
                                    })}

                                {tableRow({
                                    leftKey: firstStatementPeriod.key,
                                    leftValue: firstStatementPeriod.value,
                                })}

                                <tr className="label-summary">
                                    <th>
                                        {formatMessage(
                                            `labelInfo.components.propertyTitles.labelSummary`
                                        )?.toUpperCase()}
                                    </th>
                                    <td className="rightMargin">
                                        <Form.Control
                                            as="textarea"
                                            rows={3}
                                            className="textField small"
                                            name="labelSummary"
                                            defaultValue={
                                                labelData?.labelSummary || ''
                                            }
                                            onChange={e =>
                                                setFieldWithDispatch(
                                                    'labelSummary'
                                                )(e.target.value)
                                            }
                                        />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div className="account-management info-block">
                    <p className="title">Account Management</p>
                    <div className="properties">
                        <table>
                            <tbody>
                                {tableRow({
                                    leftKey: 'name',
                                    leftValue: (
                                        <Control
                                            errorMessage={
                                                !labelData.name && hasErrors
                                                    ? 'Value is required'
                                                    : undefined
                                            }
                                        >
                                            <Form.Control
                                                type="text"
                                                className="textField small"
                                                name="name"
                                                value={labelData?.name || ''}
                                                onChange={e =>
                                                    setFieldWithDispatch(
                                                        'name'
                                                    )(e.target.value)
                                                }
                                            />
                                        </Control>
                                    ),
                                    rightKey:
                                        isEmployeeShouldSeeSupportContactEmail
                                            ? 'supportContactEmail'
                                            : 'contactEmail',
                                    rightValue: (
                                        <Form.Control
                                            type="text"
                                            className="textField small"
                                            data-testid={
                                                isEmployeeShouldSeeSupportContactEmail
                                                    ? 'supportContactEmail'
                                                    : 'contactEmail'
                                            }
                                            name="name"
                                            value={
                                                labelData?.supportContactEmail ||
                                                ''
                                            }
                                            onChange={e => {
                                                setFieldWithDispatch(
                                                    'supportContactEmail'
                                                )(e.target.value);
                                            }}
                                        />
                                    ),
                                })}
                                {tableRow({
                                    leftKey: 'relationshipManager',
                                    leftValue: (
                                        <RenderSelect
                                            keyName="assignedToId"
                                            selectedValue={initValueOfDropdown(
                                                labelData?.assignedToId
                                            )}
                                            options={
                                                dictionaries['assignedToList']
                                            }
                                            onChange={asTo =>
                                                setFieldWithDispatch(
                                                    'assignedToId'
                                                )(Number(asTo))
                                            }
                                        />
                                    ),
                                    rightKey: 'productManager',
                                    rightValue: (
                                        <RenderSelect
                                            keyName="productManagerId"
                                            selectedValue={initValueOfDropdown(
                                                labelData?.productManagerId
                                            )}
                                            options={
                                                dictionaries['productManagers']
                                            }
                                            onChange={pr =>
                                                setFieldWithDispatch(
                                                    'productManagerId'
                                                )(Number(pr))
                                            }
                                        />
                                    ),
                                })}
                                {tableRow({
                                    leftKey: 'secondaryRelationshipManager',
                                    leftValue: (
                                        <RenderSelect
                                            keyName="quarterbackLabelManagerId"
                                            selectedValue={initValueOfDropdown(
                                                labelData?.quarterbackLabelManagerId
                                            )}
                                            options={
                                                dictionaries[
                                                    'quarterbackLabelManagers'
                                                ]
                                            }
                                            onChange={quat =>
                                                setFieldWithDispatch(
                                                    'quarterbackLabelManagerId'
                                                )(Number(quat))
                                            }
                                        />
                                    ),
                                    rightKey: 'owner',
                                    rightValue: (
                                        <Control
                                            errorMessage={
                                                !labelData.owner && hasErrors
                                                    ? 'Value is required'
                                                    : undefined
                                            }
                                        >
                                            <RenderSelect
                                                keyName="owner"
                                                selectedValue={initValueOfDropdown(
                                                    labelData?.owner
                                                )}
                                                isDisabled={!editVendorOwner}
                                                options={dictionaries['owners']}
                                                onChange={setFieldWithDispatch(
                                                    'owner'
                                                )}
                                            />
                                        </Control>
                                    ),
                                })}
                                {tableRow({
                                    leftKey: 'assignedReviewer',
                                    leftValue: (
                                        <Control>
                                            <RenderSelect
                                                keyName="assignedReviewerId"
                                                selectedValue={initValueOfDropdown(
                                                    labelData?.assignedReviewerId
                                                )}
                                                options={
                                                    dictionaries[
                                                        'assignedReviewerList'
                                                    ]
                                                }
                                                onChange={asTo =>
                                                    setFieldWithDispatch(
                                                        'assignedReviewerId'
                                                    )(Number(asTo))
                                                }
                                            />
                                        </Control>
                                    ),
                                    rightKey: 'serviceTier',
                                    rightValue: (
                                        <Control
                                            errorMessage={
                                                !labelData.serviceTierUuid &&
                                                adminRole &&
                                                hasErrors
                                                    ? 'Value is required'
                                                    : undefined
                                            }
                                        >
                                            <RenderSelect
                                                keyName="serviceTierUuid"
                                                selectedValue={initValueOfDropdown(
                                                    labelData?.serviceTierUuid
                                                )}
                                                isDisabled={
                                                    !adminRole &&
                                                    companyBrand !== 'awal' &&
                                                    !isEmployeeAbleToEditServiceTier
                                                }
                                                options={
                                                    dictionaries['serviceTiers']
                                                }
                                                onChange={setFieldWithDispatch(
                                                    'serviceTierUuid'
                                                )}
                                            />
                                        </Control>
                                    ),
                                })}
                                {tableRow({
                                    leftKey: 'welcomeEmailDate',
                                    leftValue: (
                                        <Switch
                                            className={'custom-switch'}
                                            id="custom-switch"
                                            data-testid="welcomeEmailDate"
                                            defaultChecked={
                                                welcomeEmailDate ||
                                                labelData?.welcomeEmailSent
                                                    ?.date
                                            }
                                            disabled={!!welcomeEmailDate}
                                            onClick={() =>
                                                setFieldWithDispatch(
                                                    'welcomeEmailSent'
                                                )({
                                                    date: dayjs().format(
                                                        'YYYY-MM-DD'
                                                    ),
                                                    senderId: identity.id,
                                                })
                                            }
                                        />
                                    ),
                                    rightKey: closer.key,
                                    rightValue: closer.value,
                                })}
                                {tableRow({
                                    leftKey: reviewContextNotes.key,
                                    leftValue: reviewContextNotes.value,
                                    rightKey: 'notes',
                                    rightTooltip: (
                                        <Tooltip
                                            id="notes-tooltip"
                                            message="If you want to paste HTML tags, please switch to HTML mode by clicking the </> icon in the toolbar."
                                        >
                                            <GlyphIcon
                                                name="info"
                                                size={16}
                                                className="ml-2"
                                            />
                                        </Tooltip>
                                    ),
                                    rightValue: (
                                        <Editor
                                            value={relationshipNotes || ''}
                                            onChange={(e: {
                                                target: {
                                                    value: React.SetStateAction<
                                                        string | undefined
                                                    >;
                                                };
                                            }) => {
                                                const value = String(
                                                    e.target.value
                                                );
                                                const isEmpty =
                                                    value
                                                        .replace(
                                                            /<br\s*\/?>/gi,
                                                            ''
                                                        )
                                                        .trim() === '';
                                                setRelationshipNotes?.(
                                                    isEmpty ? '' : value
                                                );
                                            }}
                                            onPaste={handlePaste}
                                        >
                                            <Toolbar>
                                                <BtnBold />
                                                <BtnItalic />
                                                <BtnUnderline />
                                                <BtnStrikeThrough />
                                                <BtnClearFormatting />
                                                <BtnNumberedList />
                                                <BtnBulletList />
                                                <BtnLink />
                                                <HtmlButton />
                                            </Toolbar>
                                        </Editor>
                                    ),
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default EditTable;