import type { FC } from 'react';
import { useState } from 'react';
import React from 'react';
import { Button, SearchInput, Section } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import './fingerprintRestrictions.scss';
import { useGetAllFingerprintRules } from 'src/data/queries/getAllFingerprintRules';
import AddFingerprintRestriction from 'src/pages/productEditModal/components/addFingerprintRestriction';
import FingerprintRestrictionsTable from 'src/pages/productEditModal/components/fingerprintRestrictions/fingerprintRestrictionsTable';
import type { AllFingerprintRules, Track } from 'src/types';

export const CLASS_NAME = 'FingerprintRestrictions';

const PAGE_SIZE = 25;

const ISRCRegex = /^[A-Z]{2}-?\w{3}-?\d{2}-?\d{5}$/;

interface Props {
    productId: number;
    onFingerprintRulesUpdated: (tracks: Track[]) => void;
}

const mergeTableDataWithEditableTracks = (
    data: AllFingerprintRules | undefined,
    updatedTracks: Track[]
): AllFingerprintRules | undefined => {
    data?.tracks.forEach(track => {
        const updatedTrack = updatedTracks.find(t => t.tuid === track.tuid);
        if (updatedTrack) {
            track.rules = updatedTrack.rules;
        }
    });

    return data;
};

const FingerprintRestrictions: FC<Props> = ({
    productId,
    onFingerprintRulesUpdated,
}) => {
    const [openSidecar, setOpenSidecar] = useState(false);
    const [page, setPage] = React.useState(0);
    const [pageSize, setPageSize] = React.useState(PAGE_SIZE);
    const [searchTerm, setSearchTerm] = React.useState<string | null>(null);
    const [mergedData, setMergedData] = useState<
        AllFingerprintRules | undefined
    >();

    const isIsrc = searchTerm && ISRCRegex.test(searchTerm);
    const { loading, data } = useGetAllFingerprintRules({
        productId: productId.toString(),
        limit: pageSize,
        offset: page * pageSize,
        isrc: isIsrc ? searchTerm : null,
        name: isIsrc ? null : searchTerm,
    });

    const onRulesUpdated = (tracks: Track[]) => {
        onFingerprintRulesUpdated(tracks);
        setMergedData(mergeTableDataWithEditableTracks(data, tracks));
    };

    const tableData = mergedData || data;

    return (
        <div className={CLASS_NAME}>
            <Section expandable>
                <Section.Header
                    title={$t(
                        'contentReview.productModal.fingerprintRulesTitle'
                    )}
                />
                <Section.Body>
                    <Section>
                        <Section.Header
                            title={$t(
                                'contentReview.fingerprintRestrictions.subsectionTitle'
                            )}
                            className={`${CLASS_NAME}-subsection-header`}
                        >
                            {!!data?.tracks.length && (
                                <Button
                                    className={`${CLASS_NAME}-button-add`}
                                    onClick={() => setOpenSidecar(true)}
                                >
                                    <GlyphIcon name="plus" size={16} />
                                    {$t(
                                        'contentReview.fingerprintRestrictions.addRestriction'
                                    )}
                                </Button>
                            )}

                            {openSidecar && (
                                <AddFingerprintRestriction
                                    productId={productId.toString()}
                                    isOpen={openSidecar}
                                    onClose={() => setOpenSidecar(false)}
                                    onRulesUpdated={onRulesUpdated}
                                />
                            )}

                            <div className="suite-text-small">
                                {$t(
                                    'contentReview.fingerprintRestrictions.subsectionDescription'
                                )}
                            </div>
                        </Section.Header>
                        <Section.Body>
                            <Section.Filters>
                                <SearchInput
                                    maxWidth={300}
                                    expanded
                                    onChange={setSearchTerm}
                                    testId={`${CLASS_NAME}-search`}
                                    placeholder={$t(
                                        'contentReview.fingerprintRestrictions.searchByTrackIsrc'
                                    )}
                                />
                            </Section.Filters>

                            <Section>
                                <Section.Table>
                                    <FingerprintRestrictionsTable
                                        page={page}
                                        setPage={setPage}
                                        pageSize={pageSize}
                                        setPageSize={setPageSize}
                                        loading={loading}
                                        data={tableData}
                                    />
                                </Section.Table>
                            </Section>
                        </Section.Body>
                    </Section>
                </Section.Body>
            </Section>
        </div>
    );
};

export default FingerprintRestrictions;