import type { FC } from 'react';
import React, { useState } from 'react';
import { Card } from '@theorchard/suite-components';
import './toolsCard.scss';
import { useHistory } from 'react-router-dom';
import {
    ROUTE_TOOLS_CONTENT_MODERATION,
    ROUTE_TOOLS_PUB_SONG_CHANGES,
} from 'src/constants';
import ArtistNameUpdateSidecar from '../artistNameUpdateSidecar';
import CatalogMetadataSpreadsheetsSidecar from '../catalogMetadataSpreadsheetsSidecar';

interface Props {
    title: string;
    subtitle?: string;
}

export const CLASSNAME = 'ToolsCard';

const ToolsCard: FC<Props> = ({ title, subtitle }) => {
    const history = useHistory();
    const [isOpenArtistNameUpdateSidecar, setIsOpenArtistNameUpdateSidecar] =
        useState(false);
    const [exportOpen, setExportOpen] = useState(false);

    const handleCardClicked = (title: string) => {
        switch (title) {
            case 'Artist Name Change':
                return setIsOpenArtistNameUpdateSidecar(true);
            case 'Catalog Metadata Spreadsheets':
                return setExportOpen(true);
            case 'Composition Changes':
                history.push(ROUTE_TOOLS_PUB_SONG_CHANGES);
                break;
            case 'Content Moderation':
                history.push(ROUTE_TOOLS_CONTENT_MODERATION);
        }
    };

    return (
        <div className={CLASSNAME}>
            <Card onClick={() => handleCardClicked(title)} suite>
                <Card.Header className={`${CLASSNAME}-header`}>
                    <Card.Title>
                        <h4 className={`${CLASSNAME}-title`}>{title}</h4>
                    </Card.Title>
                </Card.Header>
                <Card.Body className={`${CLASSNAME}-body small body`}>
                    {subtitle}
                </Card.Body>
            </Card>
            <ArtistNameUpdateSidecar
                isOpen={isOpenArtistNameUpdateSidecar}
                closeModal={() => setIsOpenArtistNameUpdateSidecar(false)}
            />
            <CatalogMetadataSpreadsheetsSidecar
                open={exportOpen}
                onClose={() => setExportOpen(false)}
            />
        </div>
    );
};

export default ToolsCard;