import clsx from 'clsx';
import { memo, useMemo } from 'react';
import { generatePath, Link } from 'react-router-dom';

import styles from './genre-column.module.css';

import {
    ItemTableListInnerColumn,
    TableColumnContainer,
    TableColumnTextContainer,
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
import { AppRoute } from '/@/renderer/router/routes';
import { Skeleton } from '/@/shared/components/skeleton/skeleton';
import { Text } from '/@/shared/components/text/text';
import { Genre } from '/@/shared/types/domain-types';

const GenreColumn = (props: ItemTableListInnerColumn) => {
    const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
        props.columns[props.columnIndex].id
    ];

    const genres = useMemo(() => {
        if (!row) return [];
        return row.map((genre) => {
            const path = generatePath(AppRoute.LIBRARY_GENRES_ALBUMS, {
                genreId: genre.id,
            });
            return { ...genre, path };
        });
    }, [row]);

    if (Array.isArray(row)) {
        return (
            <TableColumnContainer {...props}>
                <div
                    className={clsx(styles.genresContainer, {
                        [styles.compact]: props.size === 'compact',
                        [styles.large]: props.size === 'large',
                    })}
                >
                    {genres.map((genre, index) => (
                        <Text
                            component={Link}
                            isLink
                            isMuted
                            isNoSelect
                            key={genre.id}
                            to={genre.path}
                        >
                            {genre.name}
                            {index < genres.length - 1 && ', '}
                        </Text>
                    ))}
                </div>
            </TableColumnContainer>
        );
    }

    return (
        <TableColumnTextContainer {...props}>
            <Skeleton />
        </TableColumnTextContainer>
    );
};

export const GenreColumnMemo = memo(GenreColumn);

export { GenreColumnMemo as GenreColumn };