import { Add, Minus } from "iconsax-react";
import type { EditorObject } from "../../../store/editorStore";
import { useEditorStore } from "../../../store/editorStore";
import ColorPicker from "@/components/ColorPicker";

type GridSettingsProps = {
    selectedObject: EditorObject;
    onUpdate: (id: string, updates: Partial<EditorObject>) => void;
};

const GridSettings = ({ selectedObject }: GridSettingsProps) => {
    const {
        addRow,
        addColumn,
        removeRow,
        removeColumn,
        changeCellBackground,
        selectedCellId,
    } = useEditorStore();

    const tableDataObj = selectedObject.tableData;

    const handleAddRow = () => {
        if (tableDataObj) {
            addRow(selectedObject.id);
        }
    };

    const handleAddColumn = () => {
        if (tableDataObj) {
            addColumn(selectedObject.id);
        }
    };

    const handleRemoveRow = () => {
        if (tableDataObj) {
            removeRow(selectedObject.id);
        }
    };

    const handleRemoveColumn = () => {
        if (tableDataObj) {
            removeColumn(selectedObject.id);
        }
    };

    const handleCellBackgroundChange = (color: string) => {
        if (selectedCellId && tableDataObj) {
            changeCellBackground(selectedObject.id, selectedCellId, color);
        }
    };

    const selectedCell = selectedCellId && tableDataObj ? tableDataObj.cells[selectedCellId] : null;

    return (
        <div className="space-y-4">
            <div className="space-y-2">
                <div className="flex items-center justify-between">
                    <span className="text-sm font-medium">ردیف‌ها</span>
                    <div className="flex gap-2">
                        <button
                            onClick={handleAddRow}
                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                            title="افزودن ردیف"
                        >
                            <Add size={20} color="black" />
                        </button>
                        <button
                            onClick={handleRemoveRow}
                            disabled={!tableDataObj || tableDataObj.rows <= 1}
                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                            title="حذف ردیف"
                        >
                            <Minus size={20} color="black" />
                        </button>
                    </div>
                </div>
                <div className="text-xs text-gray-500">
                    تعداد ردیف‌ها: {tableDataObj?.rows || 0}
                </div>
            </div>

            <div className="space-y-2">
                <div className="flex items-center justify-between">
                    <span className="text-sm font-medium">ستون‌ها</span>
                    <div className="flex gap-2">
                        <button
                            onClick={handleAddColumn}
                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                            title="افزودن ستون"
                        >
                            <Add size={20} color="black" />
                        </button>
                        <button
                            onClick={handleRemoveColumn}
                            disabled={!tableDataObj || tableDataObj.cols <= 1}
                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                            title="حذف ستون"
                        >
                            <Minus size={20} color="black" />
                        </button>
                    </div>
                </div>
                <div className="text-xs text-gray-500">
                    تعداد ستون‌ها: {tableDataObj?.cols || 0}
                </div>
            </div>

            {selectedCell && (
                <div className="space-y-2 pt-4 border-t border-border">
                    <ColorPicker
                        label="رنگ پس‌زمینه سلول"
                        value={selectedCell.background}
                        onChange={handleCellBackgroundChange}
                    />
                </div>
            )}

            {!selectedCell && (
                <div className="text-xs text-gray-500 pt-4 border-t border-border">
                    برای تغییر رنگ سلول، ابتدا روی یک سلول کلیک کنید
                </div>
            )}
        </div>
    );
};

export default GridSettings;

