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

var _templateObject, _templateObject2;

import React, { useState } from 'react';
import styled from 'styled-components';
import { companiesApi, useLocalLabels } from '@sentecacommerce-theme/lib';
import { AddCompanyModal } from './Components';
import { NavigationSkeleton } from '../NavigationSkeleton';
import { CompanyPreview, Button, Spinner } from '../../../Common';
export var CompanyDetails = () => {
  var {
    data,
    isFetching
  } = companiesApi.useGet();
  var [showModal, setShowModal] = useState(false);
  var labels = useLocalLabels();
  var isEmpty = (data == null ? void 0 : data.length) === 0;
  return /*#__PURE__*/React.createElement(NavigationSkeleton, {
    url: "company-details",
    header: "Company Details"
  }, isFetching ? /*#__PURE__*/React.createElement(Spinner, null) : /*#__PURE__*/React.createElement(Container, null, showModal && /*#__PURE__*/React.createElement(AddCompanyModal, {
    handleClose: () => setShowModal(false)
  }), isEmpty && /*#__PURE__*/React.createElement("p", null, labels.noCompanyDetails), data == null ? void 0 : data.map((element, index) => /*#__PURE__*/React.createElement(CompanyPreview, {
    data: element,
    key: "Company__" + (element._id || index)
  })), /*#__PURE__*/React.createElement(ActionsContainer, null, /*#__PURE__*/React.createElement(Button, {
    onClick: () => setShowModal(true),
    variant: "primary"
  }, labels.addNew))));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
var ActionsContainer = styled.div.attrs({
  className: 'pt-4'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  margin-left: auto;\n\n  @media (max-width: 768px) {\n    button {\n      width: 100%;\n      display: block;\n      padding: 1.1rem 2rem 1rem;\n      font-size: 16px;\n    }\n    margin-left: 0;\n  }\n"])));
//# sourceMappingURL=index.js.map