import React, { useState, useEffect } from 'react';
import { Accordion1 as Accordion } from '../../Controllers';
import Player from '../SharedComponents/Player';
import MenuBar from '../SharedComponents/MenuBar';
import Carousel from 'react-elastic-carousel';
import { Wrapper, PlayerWrapper, Title, Subtitle } from './accordionTemplate2.styles';
import dataImages from '../../../config/dataImages';
import productImage1 from '../../../assets/image1.svg';
import productImage2 from '../../../assets/image2.svg';
import productImage3 from '../../../assets/image3.svg';
import productImage4 from '../../../assets/image4.svg';
import downloadIcon from '../../../assets/download-icon.svg';
import { pricebookService, getCatalogInfo } from '../../toolkit/threekit.service';
import toolkit from '../../toolkit';

const AccordionTemplate2 = ({
  title,
  subtitle,
  controller,
  configuration,
  handleSetAttribute,
  languageData,
  threekitConfigByUrl
}) => {
  const [activeAddress, setActiveAddress] = useState([0, 0]);
  const [price, setPrice] = useState(0);
  const [catalogInfo, setCatalogInfo] = useState({});
  const breakPoints = [{
    width: 1,
    itemsToShow: 5
  }, {
    width: 550,
    itemsToShow: 3,
    itemsToScroll: 2
  }, {
    width: 768,
    itemsToShow: 3
  }, {
    width: 1200,
    itemsToShow: 4
  }];
  console.log('threekitConfigByUrl.showSIF => ', threekitConfigByUrl.showSIF);
  useEffect(() => {
    (async () => {
      getCatalogInfo(threekitConfigByUrl.orgId, threekitConfigByUrl.assetId, threekitConfigByUrl.authToken).then(async res => {
        if (res) {
          setCatalogInfo(res);
        }
      });
    })();
  }, []);

  const getPrice = async () => {
    let pricebook = {};
    let pricebookId = '';
    pricebookService(threekitConfigByUrl.orgId, threekitConfigByUrl.authToken).then(async res => {
      if (res) {
        res.pricebooks.forEach(item => {
          if (item.name === threekitConfigByUrl.pricebookName) {
            pricebook = item;
          }
        });
      }

      pricebookId = pricebook && pricebook.id ? pricebook.id : '';
      await toolkit.player.getPrice(pricebookId, threekitConfigByUrl.currency).then(async result => {
        result !== undefined ? setPrice(new Intl.NumberFormat(threekitConfigByUrl.locale, {
          style: 'currency',
          currency: threekitConfigByUrl.currency,
          minimumFractionDigits: 2
        }).format(result)) : setPrice(0);
      });
    });
  };

  function carouselImageClick(e) {
    e.preventDefault();
    console.log('Image clicked');
  }

  var verticalOrientation = window.innerWidth < 600 ? false : true;
  getPrice();
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    id: "mainContainer",
    className: "container"
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("header", null, /*#__PURE__*/React.createElement("img", {
    src: dataImages.images.headerLogo,
    className: "header-logo",
    alt: ""
  }))), /*#__PURE__*/React.createElement("div", {
    id: "loader-container"
  }, /*#__PURE__*/React.createElement("div", {
    className: "lds-ellipsis"
  }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null))), /*#__PURE__*/React.createElement(Wrapper, {
    className: `player-container `
  }, /*#__PURE__*/React.createElement(PlayerWrapper, {
    className: "three-d-player-space"
  }, /*#__PURE__*/React.createElement(Player, null), /*#__PURE__*/React.createElement("div", {
    className: "tk-container-carousel"
  }, /*#__PURE__*/React.createElement(Carousel, {
    breakPoints: breakPoints,
    verticalMode: verticalOrientation
  }, /*#__PURE__*/React.createElement("div", {
    className: "carousel-item-image",
    onClick: carouselImageClick
  }, /*#__PURE__*/React.createElement("img", {
    src: productImage1
  })), /*#__PURE__*/React.createElement("div", {
    className: "carousel-item-image",
    onClick: carouselImageClick
  }, /*#__PURE__*/React.createElement("img", {
    src: productImage2
  })), /*#__PURE__*/React.createElement("div", {
    className: "carousel-item-image",
    onClick: carouselImageClick
  }, /*#__PURE__*/React.createElement("img", {
    src: productImage3
  })), /*#__PURE__*/React.createElement("div", {
    className: "carousel-item-image",
    onClick: carouselImageClick
  }, /*#__PURE__*/React.createElement("img", {
    src: productImage4
  })), /*#__PURE__*/React.createElement("div", {
    className: "carousel-item-image",
    onClick: carouselImageClick
  }, /*#__PURE__*/React.createElement("img", {
    src: productImage1
  })), /*#__PURE__*/React.createElement("div", {
    className: "carousel-item-image",
    onClick: carouselImageClick
  }, /*#__PURE__*/React.createElement("img", {
    src: productImage2
  })), /*#__PURE__*/React.createElement("div", {
    className: "carousel-item-image",
    onClick: carouselImageClick
  }, /*#__PURE__*/React.createElement("img", {
    src: productImage3
  })), /*#__PURE__*/React.createElement("div", {
    className: "carousel-item-image",
    onClick: carouselImageClick
  }, /*#__PURE__*/React.createElement("img", {
    src: productImage4
  })), /*#__PURE__*/React.createElement("div", {
    className: "carousel-item-image",
    onClick: carouselImageClick
  }, /*#__PURE__*/React.createElement("img", {
    src: productImage1
  })), /*#__PURE__*/React.createElement("div", {
    className: "carousel-item-image",
    onClick: carouselImageClick
  }, /*#__PURE__*/React.createElement("img", {
    src: productImage2
  })), /*#__PURE__*/React.createElement("div", {
    className: "carousel-item-image",
    onClick: carouselImageClick
  }, /*#__PURE__*/React.createElement("img", {
    src: productImage3
  }))))), /*#__PURE__*/React.createElement("div", {
    className: "template-wrapper regular-wapper",
    style: {
      width: 'none'
    }
  }, controller && controller[activeAddress[0]] && /*#__PURE__*/React.createElement(Title, {
    className: "template-title"
  }, controller[activeAddress[0]].label), controller && controller[activeAddress[0]] && /*#__PURE__*/React.createElement("div", {
    className: "subtitle"
  }, controller[activeAddress[0]].subTitle), /*#__PURE__*/React.createElement(Accordion, {
    className: "accordion-container",
    sections: controller && controller[activeAddress[0]] && controller[activeAddress[0]].sections && controller[activeAddress[0]].sections[activeAddress[1]] && controller[activeAddress[0]].sections[activeAddress[1]].sections,
    languageData: languageData,
    configuration: configuration,
    handleSetAttribute: handleSetAttribute
  })))), /*#__PURE__*/React.createElement("footer", null, /*#__PURE__*/React.createElement("span", {
    className: "bottom-name"
  }, "Order code: NSBYCNA53bk4f3c54s5zg1"), /*#__PURE__*/React.createElement("div", {
    className: "bottom-price"
  }, /*#__PURE__*/React.createElement("span", null, price), /*#__PURE__*/React.createElement("a", {
    href: "#"
  }, /*#__PURE__*/React.createElement("img", {
    src: downloadIcon
  }), " SIF"))));
};

export default AccordionTemplate2;