/* eslint-disable react/no-danger */
import { Link } from '@mui/material';

import ImageIcon from '../Icon/image';
import { styled } from '../Theme';

export interface MetricProps {
  icon: string;
  value: string | number;
  name: React.ReactNode;
  url?: string;
  animated?: false | true;
  LinkComponent?: React.ElementType;
  prefix?: string;
  iconColor?: string;
  iconStyle?: React.CSSProperties;
}

export default function Metric({
  icon,
  value,
  name,
  url = '',
  animated = false,
  LinkComponent = Link,
  prefix = '/images',
  iconColor = '#222222',
  iconStyle = {},
}: MetricProps) {
  const metric = (
    <>
      <div className="metric__image">
        <ImageIcon
          name={icon}
          alt={typeof name === 'string' ? name : ''}
          size={30}
          prefix={prefix}
          color={iconColor}
          style={iconStyle}
        />
      </div>
      <div>
        <div
          className={`metric__number ${animated ? 'metric__number--animated' : ''}`}
          dangerouslySetInnerHTML={{ __html: value as string }}
        />
        <div className="metric__name">{name}</div>
      </div>
    </>
  );

  return <Container>{url ? <LinkComponent to={url}>{metric}</LinkComponent> : metric}</Container>;
}

type ContainerProps = {
  size?: 'small' | 'large';
};

const Container = styled('div')<ContainerProps>`
  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;
  }

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

    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.palette.text.primary};
    @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;
    }
  }
`;
