import React from 'react';
import styled from 'styled-components';

import v from '../../styles/Variables';

interface AlertProps {
  /**
   * Pass any valid jsx object in-between.
   */
  children: React.ReactNode;
  /**
   *  [info, error, success, none, dark], also any custom classes you want to pass
   */
  theme?: 'error' | 'default' | 'dark' | 'success' | 'info' | 'none';
  /**
   * [left, right, center] Alignment string
   */
  align?: string;
  id?: string;
}

const Alert = ({ align = 'center', children, theme = 'default', id }: AlertProps) => (
  <AlertStyle id={id} data-test="component-alertHeading" className={`nwc--alert-heading alert--${theme}`} theme={theme} align={align} role="alert">
    {children}
  </AlertStyle>
);

export default Alert;

/* styles.  */
const AlertStyle = styled.div<AlertProps>`
  background: ${({ theme }) => handleBackground(theme)};
  color: ${({ theme }) => handleColor(theme)};
  font-size: 14px;
  padding: 6px;
  text-align: ${({ align }) => align};
  border-width: 2px;
  border-style: solid;
  border-color: ${({ theme }) => handleBorder(theme)};
`;

const handleBorder = (theme: string) => {
  switch (theme) {
    case 'dark':
      return v.colors.dark;
    case 'success':
      return v.colors.success;
    case 'error':
      return v.colors.error;
    case 'info':
      return v.colors.info;
    case 'none':
      return v.colors.dark;
    default:
      return v.colors.offLight;
  }
};

const handleBackground = (theme: string) => {
  switch (theme) {
    case 'dark':
      return v.colors.dark;
    case 'success':
      return v.colors.success;
    case 'error':
      return v.colors.error;
    case 'info':
      return v.colors.info;
    case 'none':
      return 'transparent';
    default:
      return v.colors.offLight;
  }
};

const handleColor = (theme: string) => {
  switch (theme) {
    case 'dark':
      return v.colors.light;
    case 'success':
      return v.colors.successAlt;
    case 'error':
      return v.colors.errorAlt;
    case 'info':
      return v.colors.infoAlt;
    case 'none':
      return v.colors.dark;
    default:
      return v.colors.dark222;
  }
};