import _ from 'lodash';

import {
    DatumIMType,
    StructureType,
} from '@/api/types';
import { Card } from '@/components/ui/card';
import { LL } from '@/lang/LL';
import { cn } from '@/lib/utils';

import TableItem from '../../TableItem/TableItem';
import { useBoardViewSize } from '../boardViewSize';

type BoardCardProps = {
    values: DatumIMType;
    structure: StructureType | null;
    onClick: () => void;
};

const BoardCard = (props: BoardCardProps) => {
    const tokens = useBoardViewSize();

    return (
        <Card
            onClick={() => props.onClick()}
            className={cn(
                'board-view__card cursor-pointer gap-0 overflow-hidden py-0 shadow-sm',
            )}>

            <div className={cn(
                'flex flex-col',
                tokens?.cardPadding,
                tokens?.cardFieldsGap,
            )}>
                {_.map(props.structure?.items, (item, key) => {

                    if (!item.inTable || !item.inAdmin || item.hide) return null;

                    return <div key={key} className="flex flex-col gap-0.5">
                        {tokens?.showFieldLabels && (
                            <span className={tokens.labelClass}><LL value={item.title} /></span>
                        )}

                        <TableItem
                            value={props.values[key]}
                            structure={item ?? null}
                        />
                    </div>
                })}

            </div>
        </Card>
    );
};

export default BoardCard;
