const { useState, useEffect, useMemo } = React,
  { BrowserRouter, useHistory } = ReactRouterDOM;

//conditional wrapper component
const ConditionalWrapper = ({ initialWrapper, condition, wrapper, children }) =>
  condition ? wrapper(children) : initialWrapper(children);

//tabs component
const Tabs = ({ activeTab, tabsList, isFancyTabs = true, isVertical, isRightToLeftLanguage }) => {
  const history = useHistory(),
    [isUrlTabs, setIsUrlTabs] = useState(false),
    [currentActiveTab, setCurrentActiveTab] = useState(),
    [previousActiveTab, setPreviousActiveTab] = useState(0),
    animationClassName = useMemo(() => {
      if (currentActiveTab !== undefined) {
        if (isVertical) {
          if (currentActiveTab < previousActiveTab) {
            return 'bottom-to-top-animation';
          } else {
            return 'top-to-bottom-animation';
          }
        } else {
          if (isRightToLeftLanguage) {
            if (currentActiveTab < previousActiveTab) {
              return 'left-to-right-animation';
            } else {
              return 'right-to-left-animation';
            }
          } else {
            if (currentActiveTab < previousActiveTab) {
              return 'right-to-left-animation';
            } else {
              return 'left-to-right-animation';
            }
          }
        }
      }
    }, [isVertical, isRightToLeftLanguage, currentActiveTab, previousActiveTab]);

  useEffect(() => {
    if (tabsList.find((el) => el.tabUrl)) {
      setIsUrlTabs(true);
    } else {
      if (activeTab !== 0 && activeTab && activeTab < tabsList.length) {
        setCurrentActiveTab(activeTab);
      } else {
        setCurrentActiveTab(0);
      }
    }
    // eslint-disable-next-line
  }, []);

  useEffect(() => {
    if (isUrlTabs) {
      const currentActiveTabUrlIndex = tabsList.findIndex(
        (el) => el.tabUrl === history.location.pathname
      );
      setCurrentActiveTab(currentActiveTabUrlIndex !== -1 ? currentActiveTabUrlIndex : 0);
      setPreviousActiveTab(currentActiveTab ?? 0);
    }
    // eslint-disable-next-line
  }, [history.location.pathname, isUrlTabs]);

  const onChangeTab = (index, tabUrl) => {
    if (tabUrl) history.push(tabUrl);
    else {
      setPreviousActiveTab(currentActiveTab ?? 0);
      setCurrentActiveTab(index);
    }
  };

  return (
    <div className={`tabs ${isVertical ? 'vertical-tabs' : ''}`}>
      <div className={`${isFancyTabs ? 'fancy-labels-wrapper' : 'labels-wrapper'}`}>
        <ConditionalWrapper
          initialWrapper={(children) => <>{children}</>}
          wrapper={(children) => <div className="labels">{children}</div>}
          condition={isFancyTabs}
        >
          {tabsList.map((el, i) => (
            <div
              className={`tab-label ${currentActiveTab === i ? ' active-tab-label' : ''}`}
              key={i}
              onClick={() => {
                onChangeTab(i, el.tabUrl);
              }}
            >
              {el.label}
            </div>
          ))}
        </ConditionalWrapper>
      </div>
      <div className="tabs-content-wrapper" style={{ borderRadius: isFancyTabs ? 10 : 0 }}>
        {tabsList.map((el, i) => (
          <div
            className={`tab-content ${
              currentActiveTab === i ? ' active-tab-content' : ''
            } ${animationClassName}`}
            key={i}
          >
            {currentActiveTab === i && el.content}
          </div>
        ))}
      </div>
    </div>
  );
};

const App = () => {
  const tabsList = [
    {
      label: 'First',
      // use the following if you want to bind active tab with URL
      // tabUrl: '/first',
      content: (
        <div>
          <p>First tab content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cupiditate deserunt
            eos maiores maxime molestiae odit vitae!
          </p>
        </div>
      ),
    },
    {
      label: 'Second',
      content: (
        <div>
          <p>Second tab content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cupiditate deserunt
            eos maiores maxime molestiae odit vitae!
          </p>
        </div>
      ),
    },
    {
      label: 'Third',
      content: (
        <div>
          <p>Third tab content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cupiditate deserunt
            eos maiores maxime molestiae odit vitae!
          </p>
        </div>
      ),
    },
    {
      label: 'Fourth',
      content: (
        <div>
          <p>Fourth tab content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cupiditate deserunt
            eos maiores maxime molestiae odit vitae!
          </p>
        </div>
      ),
    },
    {
      label: 'Fifth',
      content: (
        <div>
          <p>Fifth tab content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cupiditate deserunt
            eos maiores maxime molestiae odit vitae!
          </p>
        </div>
      ),
    },
    {
      label: 'Sixth',
      content: (
        <div>
          <p>Sixth tab content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cupiditate deserunt
            eos maiores maxime molestiae odit vitae!
          </p>
        </div>
      ),
    },
    {
      label: 'Seventh',
      content: (
        <div>
          <p>Seventh tab content</p>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cupiditate deserunt
            eos maiores maxime molestiae odit vitae!
          </p>
        </div>
      ),
    },
  ];

  return (
    <div className="container">
      {/*Tabs properties:
    - isFancyTabs => boolean for fancy tabs styles (default true)
    - isVertical => boolean to display tabs vertically (default false)
    - isRightToLeftLanguage => boolean to update animation direction based on language direction (default: false)
    - activeTab => receives a number which represents the active tab (default is 0)
    - tabsList => array of tabs*/}
      <h2>Fancy tabs</h2>
      <Tabs
        // activeTab={0}
        tabsList={tabsList}
      />
      <hr />
      <h2>Classic tabs</h2>
      <Tabs isFancyTabs={false} tabsList={tabsList} />
      <hr />
      <h2>Fancy vertical tabs</h2>
      <Tabs isVertical tabsList={tabsList} />
      <hr />
      <h2>Classic vertical tabs</h2>
      <Tabs isFancyTabs={false} isVertical tabsList={tabsList} />
    </div>
  );
};

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.querySelector('#app')
);