import React, { useState } from 'react';
import { Accordion1 as Accordion } from '../../Controllers';
import Player from '../SharedComponents/Player';
import MenuBar from '../SharedComponents/MenuBar';
import { Wrapper, PlayerWrapper, Title, Subtitle } from './accordionTemplate1.styles';

const AccordianTemplate1 = ({
  title,
  subtitle,
  controller,
  configuration,
  handleSetAttribute
}) => {
  const [activeAddress, setActiveAddress] = useState([0, 0]);
  let secondaryOptions;

  if (controller && controller[activeAddress[0]] && controller[activeAddress[0]].sections) {
    secondaryOptions = controller[activeAddress[0]].sections.map(({
      label
    }) => label);
  }

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MenuBar, {
    primaryOptions: controller.map(({
      label
    }) => label),
    primarySelected: activeAddress[0],
    secondaryOptions: secondaryOptions,
    secondarySelected: activeAddress[1],
    handleClickPrimary: val => setActiveAddress([val, 0]),
    handleClickSecondary: val => setActiveAddress([activeAddress[0], val]),
    handleSetAttribute: handleSetAttribute
  }), /*#__PURE__*/React.createElement(Wrapper, {
    className: "wrapper-class"
  }, /*#__PURE__*/React.createElement(PlayerWrapper, null, /*#__PURE__*/React.createElement(Player, null)), /*#__PURE__*/React.createElement("div", null, controller && controller[activeAddress[0]] && /*#__PURE__*/React.createElement(Title, {
    className: "template-title"
  }, controller[activeAddress[0]].label), controller && controller[activeAddress[0]] && controller[activeAddress[0]].sections && controller[activeAddress[0]].sections[activeAddress[1]] && /*#__PURE__*/React.createElement(Subtitle, {
    className: "template-subtitle"
  }, controller && controller[activeAddress[0]] && controller[activeAddress[0]].sections && controller[activeAddress[0]].sections[activeAddress[1]].label), /*#__PURE__*/React.createElement(Accordion, {
    sections: controller[activeAddress[0]] && controller[activeAddress[0]].sections && controller[activeAddress[0]].sections[activeAddress[1]] && controller[activeAddress[0]].sections[activeAddress[1]].sections,
    configuration: configuration,
    handleSetAttribute: handleSetAttribute
  }))));
};

export default AccordianTemplate1;