import { __, sprintf } from '@wordpress/i18n';
import { __experimentalInputControl as InputControl, Button } from '@wordpress/components';
import { useState, useEffect, useCallback } from '@wordpress/element';
import { trash } from '@wordpress/icons';
import styles from './styles.module.scss';

const CustomBoxManager = ({ value = [], onChange }) => {
    const [boxes, setBoxes] = useState(() => {
        if (value && value.length > 0) {
            return value.map((box, index) => ({
                width: box.width || box.w || '',
                length: box.length || box.l || '',
                height: box.height || box.h || '',
                id: Date.now() + index
            }));
        }
        return [{ width: '', length: '', height: '', id: Date.now() }];
    });

  const ruleValidBox = (item) =>
    item.width !== '' && Number(item.width) > 0 &&
    item.length !== '' && Number(item.length) > 0 &&
    item.height !== '' && Number(item.height) > 0;
    const ruleLimitBoxes = boxes.length >= 10;

    const hasValidBoxes = boxes.some(ruleValidBox);

    const updateGlobalSettings = useCallback((currentBoxes) => {
        const boxes = currentBoxes.map(({ width, length, height }) => ({ width: Number(width), length: Number(length), height: Number(height) }))

        onChange(boxes);
    }, [onChange]);

    const handleBoxChange = (id, field, newValue) => {
        const updatedBoxes = boxes.map(box => {
            if (box.id === id) {
                return { ...box, [field]: Number(newValue) };
            }
            return box;
        });
        setBoxes(updatedBoxes);
        updateGlobalSettings(updatedBoxes);
    };

    const addBox = () => {
        if (ruleLimitBoxes) return;
        const newBoxes = [...boxes, { width: '', length: '', height: '', id: Date.now() }];
        setBoxes(newBoxes);
    };

    const removeBox = (id) => {
        const newBoxes = boxes.filter(box => box.id !== id);
        setBoxes(newBoxes);
        updateGlobalSettings(newBoxes);
    };

    return (
        <div className={styles.customBoxesContainer}>
            {boxes.map((box, index) => (
                <div key={box.id}>
                    <div className={styles.customBoxRow}>
                        <div className={styles.boxLabel}>
                            {sprintf(__('Box %d', 'nova-post-for-woocommerce'), index + 1)}
                        </div>

                        <InputControl
                            label={__('L', 'nova-post-for-woocommerce')}
                            labelPosition="side"
                            value={box.length}
                            onChange={(val) => handleBoxChange(box.id, 'length', val)}
                            type="number"
                            min="0"
                            step="1"
                            placeholder={__('cm', 'nova-post-for-woocommerce')}
                            __next40pxDefaultSize
                        />

                        <InputControl
                            label={__('W', 'nova-post-for-woocommerce')}
                            labelPosition="side"
                            value={box.width}
                            onChange={(val) => handleBoxChange(box.id, 'width', val)}
                            type="number"
                            min="0"
                            step="1"
                            placeholder={__('cm', 'nova-post-for-woocommerce')}
                            __next40pxDefaultSize
                        />

                        <InputControl
                            label={__('H', 'nova-post-for-woocommerce')}
                            labelPosition="side"
                            value={box.height}
                            onChange={(val) => handleBoxChange(box.id, 'height', val)}
                            type="number"
                            min="0"
                            step="1"
                            placeholder={__('cm', 'nova-post-for-woocommerce')}
                            __next40pxDefaultSize
                        />

                        <div className={styles.deleteButtonContainer}>
                            {boxes.length > 1 && (
                                <Button
                                    className={styles.deleteButton}
                                    icon={trash}
                                    onClick={() => removeBox(box.id)}
                                    label={__('Remove box', 'nova-post-for-woocommerce')}
                                />
                            )}
                        </div>

                        {!ruleValidBox(box) && (
                            <p className={styles.errorMessageBox}>
                                {__('All dimensions are required for each box and must be positive numbers.', 'nova-post-for-woocommerce')}
                            </p>
                        )}
                    </div>
                </div>
            ))}

            <div className={styles.footer}>
                <Button
                    variant="secondary"
                    onClick={addBox}
                    className={styles.addBoxButton}
                    icon="plus"
                    disabled={ruleLimitBoxes}
                >
                    {__('Add Box', 'nova-post-for-woocommerce')}
                </Button>

                <div className={styles.messages}>
                    {!hasValidBoxes && (
                        <p className={styles.errorMessage}>
                            {__('At least one custom box with valid dimensions is required.', 'nova-post-for-woocommerce')}
                        </p>
                    )}

                    <p className={styles.limitMessage}>
                        {__('You can define up to 10 custom boxes. At least one box is required.', 'nova-post-for-woocommerce')}
                    </p>
                </div>
            </div>
        </div>
    );
};

export default CustomBoxManager;
