import React from 'react';
import { __ } from '@wordpress/i18n';
import {
    PanelBody,
    RangeControl,
    ColorPalette,
    GradientPicker,
    TabPanel,
    SelectControl,
} from '@wordpress/components';
import { __experimentalUseGradient } from '@wordpress/block-editor';

// カスタムカラーとグラデーションの定義
const customColors = [
    { name: 'Red', color: '#FF0000' },
    { name: 'Green', color: '#00FF00' },
    { name: 'Blue', color: '#0000FF' },
    { name: 'Yellow', color: '#FFFF00' },
    { name: 'Purple', color: '#800080' },
];

const customGradients = [
    {
        name: 'Vivid cyan blue to vivid purple',
        gradient:
            'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
        slug: 'vivid-cyan-blue-to-vivid-purple',
    },
    {
        name: 'Light green cyan to vivid green cyan',
        gradient:
            'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
        slug: 'light-green-cyan-to-vivid-green-cyan',
    },
    {
        name: 'Luminous vivid amber to luminous vivid orange',
        gradient:
            'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)',
        slug: 'luminous-vivid-amber-to-luminous-vivid-orange',
    },
];

const OverlaySetting = ({
    attributes,
    setAttributes,
    showColor = true,
    showGradient = true,
    showOpacity = true,
    showBlendMode = true,
    panelTitle = __('Overlay Settings', 'zenblocks')
}) => {
    const { overlayColor, overlayGradient, overlayOpacity, overlayBlendMode } = attributes;

    const { gradientValue, setGradient } = __experimentalUseGradient({
        gradientValue: overlayGradient,
        setGradient: (newGradient) => setAttributes({ overlayGradient: newGradient }),
    });

    const onColorChange = (newColor) => {
        setAttributes({
            overlayColor: newColor,
            overlayGradient: undefined,
        });
    };

    const onGradientChange = (newGradient) => {
        setGradient(newGradient);
        setAttributes({
            overlayGradient: newGradient,
            overlayColor: undefined,
        });
    };

    const onOpacityChange = (value) => {
        setAttributes({ overlayOpacity: value });
    };

    const onBlendModeChange = (value) => {
        setAttributes({ overlayBlendMode: value });
    };

    // 初期タブを決定する関数
    const getInitialTab = () => {
        return overlayGradient ? 'gradient' : 'color';
    };

    return (
        <PanelBody
            title={panelTitle}
            initialOpen={false}
        >
            {(showColor || showGradient) && (
                <TabPanel
                    className="overlay-tab-panel"
                    activeClass="active-tab"
                    initialTabName={getInitialTab()}
                    tabs={[
                        ...(showColor
                            ? [
                                {
                                    name: 'color',
                                    title: __('Color', 'zenblocks'),
                                    className: 'tab-color',
                                },
                            ]
                            : []),
                        ...(showGradient
                            ? [
                                {
                                    name: 'gradient',
                                    title: __('Gradient', 'zenblocks'),
                                    className: 'tab-gradient',
                                },
                            ]
                            : []),
                    ]}
                >
                    {(tab) => (
                        <div>
                            {tab.name === 'color' && showColor && (
                                <ColorPalette
                                    colors={customColors}
                                    value={overlayColor}
                                    onChange={onColorChange}
                                />
                            )}
                            {tab.name === 'gradient' && showGradient && (
                                <GradientPicker
                                    value={gradientValue}
                                    onChange={onGradientChange}
                                    gradients={customGradients}
                                />
                            )}
                        </div>
                    )}
                </TabPanel>
            )}
            {showOpacity && (
                <RangeControl
                    label={__('Opacity', 'zenblocks')}
                    value={overlayOpacity}
                    onChange={onOpacityChange}
                    min={0}
                    max={100}
                />
            )}
            {showBlendMode && (
                <SelectControl
                    label={__('Blend Mode', 'zenblocks')}
                    value={overlayBlendMode}
                    options={[
                        {
                            label: __('Normal', 'zenblocks'),
                            value: 'normal',
                        },
                        {
                            label: __('Multiply', 'zenblocks'),
                            value: 'multiply',
                        },
                        {
                            label: __('Screen', 'zenblocks'),
                            value: 'screen',
                        },
                        {
                            label: __('Overlay', 'zenblocks'),
                            value: 'overlay',
                        },
                        {
                            label: __('Darken', 'zenblocks'),
                            value: 'darken',
                        },
                        {
                            label: __('Lighten', 'zenblocks'),
                            value: 'lighten',
                        },
                        {
                            label: __('Color Dodge', 'zenblocks'),
                            value: 'color-dodge',
                        },
                        {
                            label: __('Color Burn', 'zenblocks'),
                            value: 'color-burn',
                        },
                        {
                            label: __('Hard Light', 'zenblocks'),
                            value: 'hard-light',
                        },
                        {
                            label: __('Soft Light', 'zenblocks'),
                            value: 'soft-light',
                        },
                        {
                            label: __('Difference', 'zenblocks'),
                            value: 'difference',
                        },
                        {
                            label: __('Exclusion', 'zenblocks'),
                            value: 'exclusion',
                        },
                        { label: __('Hue', 'zenblocks'), value: 'hue' },
                        {
                            label: __('Saturation', 'zenblocks'),
                            value: 'saturation',
                        },
                        { label: __('Color', 'zenblocks'), value: 'color' },
                        {
                            label: __('Luminosity', 'zenblocks'),
                            value: 'luminosity',
                        },
                    ]}
                    onChange={onBlendModeChange}
                />
            )}
        </PanelBody>
    );
};

// オーバーレイのスタイルを生成するヘルパー関数
OverlaySetting.generateOverlayStyle = (attrs) => {
    if (!attrs) return 'transparent';
    if (attrs.overlayGradient) {
        return attrs.overlayGradient;
    }
    if (attrs.overlayColor) {
        return attrs.overlayColor;
    }
    return 'transparent';
};

export default OverlaySetting;
