// components/RackDetails.tsx
import React from 'react';
import {StockRack, StockPosition} from '@/types';

interface RackDetailsProps {
    rack: StockRack | null;
    onPositionClick: (posId: number) => void;
}

export default function RackModalDetails({rack, onPositionClick}: RackDetailsProps) {

    return (
        <div className="overflow-auto p-4">
            <div className="flex flex-col space-y-4">
                {rack.shelves?.map((shelf) => (
                    <div key={shelf.shelf_symbol} className="flex items-start space-x-4 flex-col">
                        {/* Shelf label */}
                        <div className="font-bold">Shelf {shelf.shelf_symbol}</div>

                        {/* Positions container */}
                        <div className="flex space-x-4 border border-white dark:border-gray-700 h-max min-h-40 w-full">
                            {shelf.positions.length > 0 ? (
                                shelf.positions.map((position) => (
                                    <div
                                        key={position.position_symbol}
                                        className="border rounded-lg p-3 w-full cursor-pointer"
                                        onClick={() => onPositionClick(position.position_id)}
                                    >
                                        {/* Position label */}
                                        <div className="font-semibold mb-2">Pos {position.position_symbol}</div>

                                        {/* Sections grid */}
                                        <div className="grid grid-cols-1 gap-2">
                                            {position.sections.map((section) => (

                                                <div
                                                    key={section.section_symbol}
                                                    className="border rounded p-1 text-center bg-primary font-bold cursor-pointer"
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        onPositionClick(position.position_id);
                                                    }}
                                                >
                                                    Sec {section.section_symbol}
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ))
                            ) : (
                                <div className="border rounded-lg p-3 w-full flex items-center justify-center">No
                                    positions</div>
                            )}
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}