import _ from 'lodash';

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

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

type BoardCardProps = {
    values: DatumIMType;
    structure: StructureType | null;
};

const BoardCard = (props: BoardCardProps) => {
    const tokens = useBoardViewSize();
    const isAbsoluteOverlay = tokens?.actionsLayout === 'absoluteOverlay';

    return (
        <Card className={cn(
            'board-view__card gap-0 overflow-hidden py-0 shadow-sm',
            isAbsoluteOverlay && 'relative',
        )}>

            <div className={cn(
                'flex flex-col',
                tokens?.cardPadding,
                tokens?.cardFieldsGap,
                tokens?.cardContentActionsInset,
            )}>
                {_.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}>{item.title}</span>
                        )}

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

            </div>

            <BoardCardActions />
        </Card>
    );
};

export default BoardCard;
