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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React, { useState } from 'react';
import { companiesApi, useGlobalLabels } from '@sentecacommerce-theme/lib';
import styled, { css } from 'styled-components';
import { EditCompanyModal } from '../EditCompanyModal';
import { ProfileElementContainer, ProfileElementWrapper, ProfileElementContentContainer, ProfileElementActionsContainer } from '../../../Profile/Components/Common';
import { Label, CTALabel } from '../../../Profile/Components/Vouchers/Element';
export var CompanyPreview = (_ref) => {
  var _data$company, _data$company2, _data$company3, _data$company4;

  var {
    data,
    isSelectable,
    isSelected,
    onChange
  } = _ref;
  var [showModal, setShowModal] = useState(false);
  var [handleDelete] = companiesApi.useRemove(() => setShowModal(false));
  var {
    buttons,
    company
  } = useGlobalLabels();

  var handleEditClick = e => {
    e.stopPropagation();
    setShowModal(true);
  };

  var handleDeleteClick = e => {
    e.stopPropagation();
    handleDelete({
      id: data._id
    });
  };

  return /*#__PURE__*/React.createElement(Container, {
    onClick: onChange ? () => onChange(data) : undefined,
    isSelectable: isSelectable,
    isSelected: isSelected
  }, /*#__PURE__*/React.createElement(ProfileElementContainer, null, showModal && /*#__PURE__*/React.createElement(EditCompanyModal, {
    handleClose: () => setShowModal(false),
    queryData: data
  }), /*#__PURE__*/React.createElement(ProfileElementWrapper, null, /*#__PURE__*/React.createElement(ProfileElementContentContainer, null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Label, null, company.companyName), " ", (_data$company = data.company) == null ? void 0 : _data$company.companyName), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Label, null, company.vatNumber), " ", (_data$company2 = data.company) == null ? void 0 : _data$company2.vatId), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Label, null, company.companyId), " ", (_data$company3 = data.company) == null ? void 0 : _data$company3.companyId), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Label, null, company.recipient), " ", (_data$company4 = data.company) == null ? void 0 : _data$company4.companyPerson), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Label, null, company.city), " ", data.city), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Label, null, company.street), " ", data.streetName, ' ', data.streetNumber), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Label, null, company.zipCode, " "), " ", data.postalCode)), !isSelectable && /*#__PURE__*/React.createElement(ActionsContainer, null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CTALabel, {
    onClick: handleEditClick
  }, buttons.edit), /*#__PURE__*/React.createElement(CTALabel, {
    onClick: handleDeleteClick
  }, buttons.delete))))));
};
export var ActionsContainer = styled(ProfileElementActionsContainer)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  transition: all 0.3s ease;\n  @media (max-width: ", ") {\n    width: 34% !important;\n    margin-bottom: 2rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.sm.max;
});
var Container = styled.div.attrs(props => {
  return {
    className: props.isSelectable ? 'pl-4 ml-2' : ''
  };
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "\n"])), props => props.isSelectable && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      cursor: pointer;\n\n      &:after {\n        content: '';\n        display: block;\n        width: 1.8rem;\n        height: 1.8rem;\n        border: 0.2rem solid ", ";\n        border-radius: 50%;\n\n        position: absolute;\n        left: -0.4rem;\n        top: 0.6rem;\n      }\n\n      ", "\n    "])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
}, props.isSelected && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        &:before {\n          content: '';\n          display: block;\n          width: 0.8rem;\n          height: 0.8rem;\n          background-color: ", ";\n          border-radius: 50%;\n\n          position: absolute;\n          left: 0.1rem;\n          top: 1.1rem;\n        }\n      "])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
})));
//# sourceMappingURL=index.js.map