import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { useLocalLabels, useBoolean, OverflowHidden } from '@sentecacommerce-theme/lib';
import { AnimatedModal, Button } from '../../../Common';
import { Content } from './Components';
export var ProductDescription = (_ref) => {
  var {
    content,
    descriptionRef
  } = _ref;
  var [openModal, setOpenModal] = useBoolean();
  var [activeTab, _setActiveTab] = React.useState('Details');
  var {
    productDescription,
    deliveryInfo,
    mobileDescriptionButton
  } = useLocalLabels();

  var handleClose = () => setOpenModal.off();

  var handleOpenModal = () => setOpenModal.on();

  return /*#__PURE__*/React.createElement(Container, {
    ref: descriptionRef
  }, /*#__PURE__*/React.createElement(Desktop, null, /*#__PURE__*/React.createElement(Content, {
    activeTab: activeTab,
    setActiveTab: str => _setActiveTab(str),
    labels: {
      productDescription,
      deliveryInfo
    },
    content: content
  })), /*#__PURE__*/React.createElement(OpenMobileDescription, {
    onClick: handleOpenModal,
    bordered: true
  }, mobileDescriptionButton), /*#__PURE__*/React.createElement(Mobile, null, openModal && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverflowHidden, null), /*#__PURE__*/React.createElement(AnimatedModal, {
    onClose: handleClose,
    title: productDescription
  }, /*#__PURE__*/React.createElement(Content, {
    activeTab: activeTab,
    setActiveTab: str => _setActiveTab(str),
    labels: {
      productDescription,
      deliveryInfo
    },
    content: content
  })))));
};
var Container = styled.div.attrs({
  className: 'mt-5 row g-1 px-4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Desktop = styled.div.attrs({
  className: 'd-none d-md-block'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var Mobile = styled.div.attrs({
  className: 'd-block d-md-none'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var OpenMobileDescription = styled(Button).attrs({
  className: 'd-block d-md-none'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map