function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useState } from 'react';
import { Wrapper } from './accordion2.styles';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import InputComponents from '../../../InputComponents';
import Navigations from '../../../../config/navigation';

const Accordion2 = ({
  sections,
  configuration,
  handleSetAttribute
}) => {
  const [selectedSection, setSelectedSection] = useState(null);

  const handleClickSelect = idx => {
    setSelectedSection(selectedSection === idx ? null : idx);
  };

  const handleClickNext = () => {
    let selected = localStorage.getItem('menuSelected');
    let gearSelected = localStorage.getItem('gearSelected');
    localStorage.setItem('clickOnPrimary', 'false');
    let nextSubmenu = Navigations[selected].next;
    let nextMenu = Navigations[selected].menuOption;

    if (gearSelected === 'Pants' && selected === 'trim-0' || gearSelected === 'Jacket' && selected === 'other-1') {
      nextMenu = Navigations[selected].menuOption2;
      nextSubmenu = Navigations[selected].next2;
    }

    document.getElementById(nextMenu).click();
    setTimeout(function () {
      document.getElementById(nextSubmenu).click();
      localStorage.setItem('menuSelected', nextSubmenu);
    }, 300);
  };

  if (!sections || sections.length === 0) return null;
  return /*#__PURE__*/React.createElement(React.Fragment, null, sections.map(({
    label,
    selected,
    heading,
    description,
    component: Component,
    inputs,
    cssClass
  }, i) => /*#__PURE__*/React.createElement(Wrapper, {
    key: i,
    selected: selectedSection === i
  }, /*#__PURE__*/React.createElement("div", {
    id: cssClass && cssClass,
    className: "section-wrapper",
    onClick: () => handleClickSelect(i)
  }, /*#__PURE__*/React.createElement("div", {
    className: 'section-label'
  }, label), /*#__PURE__*/React.createElement("div", {
    id: 'PlusOutlined' + label + i
  }, selectedSection === i ? /*#__PURE__*/React.createElement(MinusOutlined, {
    style: {
      transition: `all 0.3s`,
      transform: selected ? 'rotate(45deg)' : 'rotate(0)'
    }
  }) : /*#__PURE__*/React.createElement(PlusOutlined, {
    style: {
      transition: `all 0.3s`,
      transform: selected ? 'rotate(45deg)' : 'rotate(0)'
    }
  }))), /*#__PURE__*/React.createElement("div", {
    className: "section-wrapper",
    className: "section-input-options"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, heading), /*#__PURE__*/React.createElement("div", null, description), /*#__PURE__*/React.createElement("div", null, Component ? /*#__PURE__*/React.createElement(Component, null) : inputs && inputs.length > 0 ? inputs.map((input, j) => /*#__PURE__*/React.createElement(InputComponents, _extends({
    key: j
  }, input, {
    value: configuration && configuration[input ? input.attribute : ''],
    onChange: val => {
      handleSetAttribute({
        [input ? input.attribute : '']: val
      });
    },
    cssClass: [input ? input.cssClass : '']
  }))) : null))))));
};

export default Accordion2;