/* eslint-disable react/no-danger */
import React, { isValidElement } from 'react';
import { Box, Link } from '@mui/material';
import PropTypes from 'prop-types';
import { Icon } from '@iconify/react';
import styled from '@emotion/styled';
import Skeleton from '@mui/material/Skeleton';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default function Metric({
  icon,
  value,
  name,
  url = '',
  animated = false,
  LinkComponent = Link,
  loading = false
}) {
  const renderIcon = () => {
    if (/*#__PURE__*/React.isValidElement(icon)) {
      return icon;
    }
    return /*#__PURE__*/_jsx(Box, {
      component: Icon,
      icon: icon,
      alt: typeof name === 'string' ? name : '',
      sx: {
        fontSize: 30
      }
    });
  };
  if (loading) {
    return /*#__PURE__*/_jsxs(Container, {
      children: [icon && /*#__PURE__*/_jsx(Box, {
        className: "metric__image",
        children: /*#__PURE__*/_jsx(Skeleton, {
          variant: "circular",
          width: 32,
          height: 32
        })
      }), /*#__PURE__*/_jsxs(Box, {
        children: [/*#__PURE__*/_jsx(Skeleton, {
          className: `metric__number ${animated ? 'metric__number--animated' : ''}`,
          variant: "rounded",
          width: 160,
          height: "36px",
          sx: {
            mb: 1
          }
        }), /*#__PURE__*/_jsx(Skeleton, {
          className: "metric__name",
          variant: "rounded",
          width: 80,
          height: 20
        })]
      })]
    });
  }
  const metric = /*#__PURE__*/_jsxs(_Fragment, {
    children: [icon && /*#__PURE__*/_jsx(Box, {
      className: "metric__image",
      children: renderIcon()
    }), /*#__PURE__*/_jsxs(Box, {
      children: [/*#__PURE__*/isValidElement(value) ? /*#__PURE__*/_jsx(Box, {
        className: `metric__number ${animated ? 'metric__number--animated' : ''}`,
        children: value
      }) : /*#__PURE__*/_jsx(Box, {
        className: `metric__number ${animated ? 'metric__number--animated' : ''}`,
        dangerouslySetInnerHTML: {
          __html: value
        }
      }), /*#__PURE__*/_jsx(Box, {
        className: "metric__name",
        children: name
      })]
    })]
  });
  return /*#__PURE__*/_jsx(Container, {
    children: url ? /*#__PURE__*/_jsx(LinkComponent, {
      href: url,
      sx: {
        textDecoration: 'none'
      },
      children: metric
    }) : metric
  });
}
Metric.propTypes = {
  icon: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  url: PropTypes.string,
  animated: PropTypes.bool,
  LinkComponent: PropTypes.elementType,
  loading: PropTypes.bool
};
const Container = styled(Box)`
  border-left: 1px solid ${props => props.theme.palette.divider};
  padding: 10px 0 10px 16px;
  @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
    padding: 0 0 0 8px;
  }

  display: flex;
  justify-items: center;
  align-items: flex-start;

  a {
    display: flex;
    justify-items: center;
    align-items: flex-start;
  }

  .metric__image {
    margin-right: 8px;
    margin-top: 2px;
  }

  .metric__number {
    margin-bottom: 8px;
    font-size: ${props => props.size === 'small' ? 32 : 36}px;
    font-weight: 600;
    line-height: 36px;
    color: ${props => props.theme.typography.color.main};

    small {
      font-size: 12px;
      line-height: 12px;
    }

    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
      font-size: ${props => props.size === 'small' ? 24 : 28}px;
      line-height: ${props => props.size === 'small' ? 24 : 28}px;
      margin-bottom: 2px;
    }
  }

  .metric__number--animated {
    animation-name: blink-opacity;
    animation-duration: 250ms;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    background-color: transparent !important;
  }

  .metric__name {
    font-size: 14px;
    text-transform: capitalize;
    line-height: 1.2;
    font-weight: 500;
    color: ${props => props.theme.typography.color.main};
    @media (max-width: ${props => props.theme.breakpoints.values.sm}px) {
      font-size: 10px;
      line-height: 1;
    }
  }

  @keyframes blink-opacity {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
    100% {
      opacity: 1;
    }
  }
`;