import React from 'react';
import { oneOf, string } from 'prop-types';
import { Shelf } from '../Layout';
import { Text } from '../Text/index';
import css from '@styled-system/css';
import styled from '@emotion/styled';

const getSize = (size) => {
  switch (size) {
    case 'narrow':
      return '2px 7px 2px 7px';
    case 'small':
      return '3px 3px 3px 3px';
    default:
      return '3px 8px 3px 8px';
  }
};

const StyledSpan = styled('span')(
  css({
    appearance: 'none',
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'space-evenly',
    borderRadius: 'button',
    textAlign: 'center',
    minHeight: '28px',
    whiteSpace: 'nowrap',
    padding: '3px 8px 3px 8px',
    width: 'min-content',
  }),
  ({ backgroundColor, borderColor, size }) =>
    css({
      backgroundColor,
      borderStyle: 'solid',
      fontSize: size === 'small' ? '3px' : 'standard',
      borderWidth: 'button',
      borderColor,
      padding: getSize(size),
    }),
);

const Token = ({
  children,
  color = 'Mid Neutral 1',
  backgroundColor = 'Light Neutral 1',
  borderColor = 'transparent',
  size = 'regular',
  fontSize = 'standard',
  style,
}) => (
  <StyledSpan backgroundColor={backgroundColor} borderColor={borderColor} size={size} style={style}>
    <Shelf gap={8} flexWrap="nowrap">
      <Text fontSize={fontSize} color={color}>
        {children}
      </Text>
    </Shelf>
  </StyledSpan>
);

export default Token;

Token.propTypes = {
  size: oneOf(['narrow', 'small', 'regular']),
  color: string,
  backgroundColor: string,
  borderColor: string,
};