import { Button, SearchInput } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import React, { useState } from 'react';
import OAPanel from 'shared/components/oaPanel';
import AddFingerprintRestriction from 'src/components/addFingerprintRestriction';
import FingerprintRestrictionsTable from 'src/components/fingerprintRestrictionsOAPanel/fingerprint-restrictions-table';
import useFingerprintRestrictionsConfig from 'src/config';
import { useGetAccountAndProductTracksFingerprintRules } from 'src/data/queries';
import type { FC } from 'react';

const PAGE_SIZE = 10;

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

export const CLASS_NAME = 'FingerprintRestrictionsOAPanel';

export const FingerprintRestrictionsOAPanel: FC = () => {
    const [pageSize, setPageSize] = useState<number>(PAGE_SIZE);
    const [page, setPage] = useState<number>(0);
    const [searchTerm, setSearchTerm] = useState<string | null>(null);
    const [openSidecar, setOpenSidecar] = useState(false);
    const isIsrc = searchTerm && ISRCRegex.test(searchTerm);

    const { productId } = useFingerprintRestrictionsConfig();
    const { loading, data, error, refetch } =
        useGetAccountAndProductTracksFingerprintRules(
            productId,
            pageSize,
            page * pageSize,
            isIsrc ? searchTerm : null,
            isIsrc ? null : searchTerm
        );

    return (
        <OAPanel
            title={$t(
                'fingerprintRestrictions.fingerprintRestrictionsOaPanel.title'
            )}
            editable
            error={!!error}
        >
            <div className={CLASS_NAME}>
                <div className={`${CLASS_NAME}-header`}>
                    <SearchInput
                        onChange={setSearchTerm}
                        placeholder={$t(
                            'fingerprintRestrictions.fingerprintRestrictionsOaPanel.search.title'
                        )}
                        maxWidth={300}
                        expanded
                    />
                    <Button
                        variant="primary"
                        onClick={() => setOpenSidecar(true)}
                    >
                        <GlyphIcon name="plus" size={12} inverse />
                        {$t(
                            'fingerprintRestrictions.fingerprintRestrictionsOaPanel.sideCardBtn'
                        )}
                    </Button>
                </div>
                {openSidecar && (
                    <AddFingerprintRestriction
                        productId={productId}
                        isOpen={openSidecar}
                        onClose={() => setOpenSidecar(false)}
                        onRulesUpdated={refetch}
                    />
                )}
                <FingerprintRestrictionsTable
                    page={page}
                    setPage={setPage}
                    pageSize={pageSize}
                    setPageSize={setPageSize}
                    loading={loading}
                    data={data}
                />
            </div>
        </OAPanel>
    );
};