ParamType.tsx

import { LIGHT_THEME } from '@vtb/ui-kit3';
import cn from 'classnames';
import React from 'react';
import styled, { css } from 'styled-components';

const lightPalette = LIGHT_THEME.color;

export type TagLightVariant = keyof typeof variantStyles;

export interface ParamTypeProps {
  title?: string;
  className?: string;
  children?: React.ReactNode;
  variant?: TagLightVariant;
  textColor?: keyof typeof lightPalette.text;
  theme?: typeof LIGHT_THEME;
}

const ParamType: React.FC<ParamTypeProps> = ({
  children,
  className,
  variant = 'outline',
  textColor = 'staticWhite',
  ...props
}) => {
  return (
    <InnerTag className={cn(className, variant && variantStyles[variant])}>
      <Overflow textColor={textColor} {...props}>
        {children}
      </Overflow>
    </InnerTag>
  );
};

const maxWidth = 400;
const InnerTag = styled.span`
  display: inline-flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
  padding: 0 8px; /* + 1px border */
  height: 16px;
  border-radius: 3px;
  box-shadow: 0 0 0 2px #fff;
`;
const Overflow = styled.span<Pick<ParamTypeProps, 'textColor'>>`
  font-style: normal;
  display: inline-block;
  max-width: ${maxWidth}px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: ${(props) => lightPalette.text[props.textColor ? props.textColor : 'primary']};
  border-radius: 4px;
`;

const variantStyles = {
  outline: css`
    background-color: ${lightPalette.background.tertiary};
  `,
  neutral: css`
    background-color: ${lightPalette.background.tertiary};
  `,
  processing: css`
    background-color: ${lightPalette.special.blue};
  `,
  success: css`
    background-color: ${lightPalette.status.success};
  `,
  confirmed: css`
    background-color: ${lightPalette.special.lightBlue};
  `,
  warning: css`
    background-color: ${lightPalette.status.warn};
  `,
  error: css`
    background-color: ${lightPalette.special.red};
  `,
};

export default ParamType;