/* eslint-disable no-extra-boolean-cast */
import React from "react";
import PropTypes from "prop-types";
import classnames from "classnames";
import Card from "../Card";
import Grid from "../Grid";
import Link from "../Link";
import Typography from "../Typography";
import Divider from "../Divider";
import Skeleton from "../Skeleton";
import Image from "../Image";
import ArrowRight from "../Icon/ArrowRight";
import { getColorsLabels, getShades } from "../styles/colors";
import { screenSm, screenXs } from "../styles/breakpoints";
import useMediaQuery from "../styles/useMediaQuery";
import getClasses from "./styles";
import CssFlex from "../CssFlex";
var colorsList = getColorsLabels(true);
var shadesList = getShades();

var BorderedBlock = function BorderedBlock(props) {
  var image = props.image,
      title = props.title,
      description = props.description,
      quantityImage = props.quantityImage,
      textImage = props.textImage,
      content = props.content;
  var actionText = props.actionText,
      actionOnClick = props.actionOnClick,
      borderColor = props.borderColor,
      borderShade = props.borderShade,
      textBadge = props.textBadge,
      children = props.children;
  var footerContent = props.footerContent,
      titleLines = props.titleLines,
      descriptionLines = props.descriptionLines,
      footerLines = props.footerLines,
      className = props.className;
  var isLoading = props.isLoading,
      loadingHeight = props.loadingHeight;
  var isScreenSm = useMediaQuery(screenSm);
  var isScreenXs = useMediaQuery(screenXs);
  var isMobile = isScreenSm || isScreenXs;
  var width = isMobile ? 2 : 4;
  var classes = getClasses({
    borderColor: borderColor,
    borderShade: borderShade,
    width: width,
    titleLines: titleLines,
    descriptionLines: descriptionLines,
    footerLines: footerLines,
    isMobile: isMobile
  });
  return /*#__PURE__*/React.createElement(Card, {
    className: classnames(classes.card, className)
  }, !!isLoading && /*#__PURE__*/React.createElement(Skeleton, {
    height: loadingHeight,
    width: "100%",
    className: classes.block
  }), !isLoading && /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column"
  }, /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    gap: "md",
    className: classes.container
  }, textBadge !== "" && /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    gap: "md",
    justifyContent: "end"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "caption",
    className: classes.textBadge
  }, textBadge), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
    className: classes.wrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.dot
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.ripple
  })))), /*#__PURE__*/React.createElement(CssFlex, {
    gap: "3xl",
    alignItems: "center",
    direction: ["column", "row"]
  }, /*#__PURE__*/React.createElement(CssFlex, {
    direction: "column",
    alignItems: "center",
    className: classes.imageContainer
  }, /*#__PURE__*/React.createElement(Image, {
    src: image,
    center: true
  }), (!!textImage || !!quantityImage) && /*#__PURE__*/React.createElement(React.Fragment, null, quantityImage !== undefined && /*#__PURE__*/React.createElement(Typography, {
    variant: "f1-40",
    weight: "bold",
    shade: 900
  }, quantityImage), !!textImage && /*#__PURE__*/React.createElement(Typography, {
    variant: "f2-10",
    shade: 900
  }, textImage))), /*#__PURE__*/React.createElement(CssFlex, {
    gap: "md",
    direction: "column"
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "title2",
    shade: 900
  }, title), /*#__PURE__*/React.createElement("div", null, content), /*#__PURE__*/React.createElement(Typography, {
    variant: "paragraph"
  }, description), children, actionText !== "" && /*#__PURE__*/React.createElement(Link, {
    onClick: actionOnClick,
    color: "neutral"
  }, actionText, /*#__PURE__*/React.createElement(ArrowRight, {
    size: 24
  }))))), !!footerContent && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
    dashed: true,
    className: classes.divider
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.container
  }, footerContent))));
};

BorderedBlock.propTypes = {
  image: PropTypes.string,
  title: PropTypes.string,
  description: PropTypes.string,
  quantityImage: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  textImage: PropTypes.string,
  actionText: PropTypes.string,
  actionOnClick: PropTypes.instanceOf(Object),
  borderColor: PropTypes.oneOf(colorsList),
  borderShade: PropTypes.oneOf(shadesList),
  textBadge: PropTypes.string,
  titleLines: PropTypes.number,
  descriptionLines: PropTypes.number,
  isLoading: PropTypes.bool,
  loadingHeight: PropTypes.string
};
BorderedBlock.defaultProps = {
  image: "",
  title: "",
  description: "",
  quantityImage: undefined,
  textImage: "",
  actionText: "",
  actionOnClick: function actionOnClick() {},
  borderColor: "neutral",
  borderShade: 500,
  textBadge: "",
  titleLines: 3,
  descriptionLines: 4,
  isLoading: false,
  loadingHeight: undefined
};
export default BorderedBlock;