import React from 'react';
import TabHeader from "@/jsx/Layouts/ContentComponents/TabHeader.jsx";
import {__} from "@wordpress/i18n";
import TextareaControl from "@/jsx/Controls/TextareaControl.jsx";
import axios from "axios";
import FloatNotification from "@/jsx/Components/FloatNotification.jsx";
import Divider from "@/jsx/Components/Divider.jsx";
import SelectControl from "@/jsx/Controls/SelectControl.jsx";
import CheckboxControl from "@/jsx/Controls/CheckboxControl.jsx";
import {isToken} from "@/js/Tools/isToken.js";

export default class TabContent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      query: [],
      processing: false,
      processingKey: null,
      message: null,
    }
  }

  /**
   * Get the active tab config
   * @return {null|*}
   */
  tabConfig() {

    const {activeTab, config} = this.props;
    return config.tabs.find(tab => tab.name === activeTab);

  }

  handleSubmit(option) {

    const {ajaxUrl, nonce} = this.props;

    this.setState(
      {
        processing: true,
        processingKey: option.name,
      }
    );

    const axiosData = new URLSearchParams({
      action: 'readabler_assistant_option_update',
      _ajax_nonce: nonce,
      option_name: option.name,
      option_value: option.value,
    });

    axios.post(ajaxUrl, axiosData)
      .then(response => {
        this.setState(
          {
            processing: false,
            processingKey: null,
            message: {
              uid: response.data.data.uid,
              text: response.data.data.message,
              type: response.data.success ? 'success' : 'warning',
            }
          });
      })
      .catch(error => {
        console.log(error);
        this.setState({
          processing: false,
          processingKey: null,
          message: {
            uid: 'error-' + Math.random().toString(36).substring(7),
            text: __('Something went wrong', 'readabler-assistant'),
            type: 'warning',
          }
        });
      });

  }

  /**
   * Get controls for the active tab
   * @return {*[]}
   */
  tabControls() {

    const {activeTab, config} = this.props;
    const tabControls = config?.controls[activeTab] ?? null;

    // If token is provided make add controls in the config disabled
    if (isToken(config)) {
      tabControls.forEach(control => {
        control.disabled = true;
      });
    }

    return config?.controls[activeTab] ?? null;

  }

  render() {

    const {activeTab, config} = this.props;

    // Get the active tab
    const tabConfig = this.tabConfig();
    if (!tabConfig) {
      return null;
    }

    // Get the controls for the active tab
    let tabControls = this.tabControls();
    if (!tabControls) {
      return null;
    }

    return (
      <div className="ra-tab-content">
        <TabHeader {...tabConfig}/>
        {
          (activeTab === 'configuration' && isToken(config)) && (
            <div className="ra-tab-content-header">
              <p className="bg-wp-blue-0 p-4 rounded-md max-w-[680px]">
                {__('Your website is using the AI Assistant. To configure its modes, appearance, and behavior, visit the Settings page in your', 'readabler-assistant')} <a href="https://account.readabler.com/dashboard" target="_blank" rel="noopener noreferrer">{__('Dashboard', 'readabler-assistant')}</a>.
              </p>
            </div>
          )
        }
        <Divider/>
        <div className={`ra-content-settings ${ activeTab === 'configuration' && isToken(config) ? 'opacity-25 select-none' : '' }`}>
          {
            tabControls.map((control, index) => {

              switch (control.type) {

                case 'textarea':
                  return (
                    <TextareaControl
                      {...control}
                      key={index}
                      activeTab={activeTab}
                      processing={this.state.processing && this.state.processingKey === control.name}
                      handleSubmit={this.handleSubmit.bind(this)}
                    />
                  );

                case 'select':
                  return (
                    <SelectControl
                      {...control}
                      key={index}
                      activeTab={activeTab}
                      processing={this.state.processing && this.state.processingKey === control.name}
                      handleSubmit={this.handleSubmit.bind(this)}
                    />
                  );

                case 'checkbox':
                  return (
                    <CheckboxControl
                      {...control}
                      key={index}
                      activeTab={activeTab}
                      processing={this.state.processing && this.state.processingKey === control.name}
                      handleSubmit={this.handleSubmit.bind(this)}
                    />
                  )

                case 'divider':
                  return (
                    <Divider
                      {...control}
                      key={index}
                    />
                  );

                default:
                  return (<div key={index}>{__('Unknown control type', 'readabler-assistant')}</div>)

              }

            })
          }
        </div>
        <FloatNotification {...this.state.message} />
      </div>
    );

  }
}