import React from 'react';
import {__} from "@wordpress/i18n";
import NavLink from "@/jsx/Layouts/NavigationComponents/NavLink.jsx";
import Divider from "@/jsx/Components/Divider.jsx";
import {Logo} from "@/jsx/Components/Logo.jsx";
import NavGroup from "@/jsx/Layouts/NavigationComponents/NavGroup.jsx";
import NavButton from "@/jsx/Layouts/NavigationComponents/NavButton.jsx";

export default class AsideNavigation extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      activeTab: null,
    };
  }

  componentDidMount() {

    const {activeTab} = this.props;
    if (!activeTab) {
      return;
    }

    this.setState({activeTab: activeTab});

  }

  componentDidUpdate( prevProps ) {

    const {activeTab} = this.props;
    if (prevProps.activeTab !== activeTab) {
      this.setState({activeTab: activeTab});
    }

  }

  handleTabChange(tabName) {

    this.props.onTabChange(tabName);

  }

  render() {

    const {config} = this.props;
    if (!config) {
      return null;
    }

    const {tabs,links} = config;

    return (
      <div className="ra-aside-navigation">
        <Logo {...this.props} />
        <Divider className="mx-2"/>
        {
          (tabs && tabs.length > 0) && (
            <NavGroup label={__('Plugin settings', 'readabler-assistant')}>
              {
                tabs.map((tab, index) => {
                  return (
                    <NavButton
                      key={index}
                      icon={tab.icon}
                      className={this.state.activeTab === tab.name ? 'active' : ''}
                      onClick={this.handleTabChange.bind(this, tab.name)}
                    >
                      {tab.label}
                    </NavButton>
                  );
                })
              }
            </NavGroup>
          )
        }
        <Divider className="mx-2"/>
        {
          (links && links.length > 0) && (
            <NavGroup label={__('Helpful links', 'readabler-assistant')}>
              {
                links.map((link, index) => {
                  return (
                    <NavLink
                      key={index}
                      href={link.href}
                      target={link.target}
                      title={link.label}
                      icon={link.icon}
                    >
                      {link.label}
                    </NavLink>
                  );
                })
              }
            </NavGroup>
          )
        }
      </div>
    );

  }

}