import {Tab} from '@headlessui/react';
import React, {Component} from 'react';
import {connect} from "react-redux";
import RowsActions from './actions/RowsActions';
import BuiltInPresets from './BuiltInPresets';
import classNames from 'classnames';
import ImportExportPresets from './ImportExportPresets';
import {__} from "@/globals";

const {setRows} = RowsActions;

class PresetsPanel extends Component {
    static label = __('presets', window.CouponsPlus.textDomain);

    state = {
        activePanel: PresetsPanel.panels[0].label
    }

    static mapStateToProps(state, props) {
        return props;
    };

    static panels = [
        BuiltInPresets,
        ImportExportPresets
    ]

    static getIcon() {
        return (
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                      d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
            </svg>
        );
    }

    render() {
        return (
            <div className="flex flex-col space-y-5 max-w-[980px]">
                <div className="text-base text-gray-600 flex flex-row space-x-2">
                    <div className="text-base flex flex-row space-x-2">
                        {PresetsPanel.panels.map(Panel => (
                            <button
                                key={Panel.label}
                                className={classNames({
                                    'inline-flex flex-row items-center justify-center space-x-2 h-8 px-2 capitalize rounded-3 hover:cursor-pointer hover:bg-gray-250 transition': true,
                                    'bg-gray-250': this.state.activePanel === Panel.label
                                })}
                                onClick={() => this.setState({
                                    activePanel: Panel.label
                                })}
                            >
                                <span>{Panel.icon}</span><span className="flex h-5">{Panel.label}</span>
                            </button>
                        ))}
                    </div>
                </div>
                {PresetsPanel.panels.map((Panel) => <div className={classNames({
                    'w-full h-full': true,
                    'hidden': this.state.activePanel !== Panel.label
                })}>
                    <Panel/>
                </div>)}
            </div>
        );
    }
}

export default connect(PresetsPanel.mapStateToProps, {setRows})(PresetsPanel);