import { Dictionary } from 'ramda'

type AnyProps = Dictionary<any>

const colors: Dictionary<!!|<>> = {
  brand: '#3677E8',
  darkBrand: '#0E436D',
  brand10a: 'rgba(54, 119, 232, 0.1)',
  paleBrand: '#B1C9FF',
  tableHeaderBg: 'rgba(247, 247, 247, 0.6)',
  headerBg: '#ffffff',
  mainBg: '#fafcff',
  boxDefaultBg: '#ffffff',
  border: '#d1d1d1',
  lightGrey: '#f7f7f7',

  'status-open': '#FFCC00',
  'status-draft': '#9E9FA5',
  'status-paid': '#1BEB98',
  'status-overdue': '#FF4D95',
  'light-3': '#E5E5E5',
  'light-5': '#B2B2B2',
  'light-6': '#CCC',
  tableHover: 'rgba(247, 247, 247, 0.6)',

  fogAndRain: '#979797',
  gandalf: '#E5E5E5',
  valentineRed: '#F04158',
  succulentLeaf: '#66DCCF',
  yellow: '#F4DD51',
  teal: '#35D1BF',
}

const theme = {
  global: {
    colors,
    control: {
      border: {
        width: '1px',
        radius: '4px',
      },
    },
    focus: {
      border: {
        color: '#cccccc',
      },
    },
    drop: {
      border: {
        radius: '20px',
      },
      margin: {
        vertical: '12px',
      },
    },
    spacing: '14px',
    font: {
      family: 'GT-Walsheim',
      size: '14px',
      weight: 400,
      height: '17px',
    },
  },
  header: {
    height: '68px',
  },
  textArea: {
    extend: () => `
      resize: none;
    `,
  },
  button: {
    color: { light: '#9b9b9b', dark: 'white' },
    border: {
      width: '1px',
      radius: '80px',
      color: colors['light-6'],
    },
    primary: {
      color: colors.brand,
    },
    extend: (props: AnyProps): string => `
      ${props.plain ? '' : `padding: 8px ${props.primary ? '28px' : '12px'};`}
      text-transform: ${props.primary ? 'uppercase' : 'none'};
      line-height: ${props.primary ? '0px' : 'inherit'};
      min-height: 40px;

      // Hack to style the Select's Button.
      ${
        props.id && props.id.indexOf('select') !== -1
          ? `
        max-width: none;
        padding: 0;
        width: 100%;
      `
          : ''
      }
    `,
  },
  text: {
    medium: {
      size: '16px',
      height: '19px',
    },
  },
  paragraph: {
    medium: {
      maxWidth: undefined,
    },
    xsmall: {
      size: '12px',
      height: '1.33',
    },
  },
  textInput: {
    extend: (props: AnyProps): string =>
      `
        height: 40px;
        padding-left: 12px;
        font-size: 14px;
        font-weight: 400;
        ${
          props.noBorderRight || props.noBorder
            ? `
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;
        `
            : ''
        }
        ${
          props.noBorderLeft || props.noBorder
            ? `
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;
          border-left-width: 0;
        `
            : ''
        }
        ${
          props.noBorderBottom
            ? `
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        `
            : ''
        }
        ${
          props.noBorderTop
            ? `
          border-top-width: 0;
          border-top-left-radius: 0;
          border-top-right-radius: 0;
        `
            : ''
        }
        background: ${props.error ? 'status-error' : 'white'};
      `,
  },
  select: {
    background: colors.boxDefaultBg,
  },
  heading: {
    level: {
      1: {
        medium: {
          size: '32px',
          weight: 600,
          color: colors.darkBrand,
        },
      },
      2: {
        medium: {
          size: '32px',
          weight: 400,
        },
      },
      4: {
        medium: {
          color: '#000000',
          size: '13px',
          margin: {
            vertical: 0,
          },
        },
      },
    },
  },
  image: {
    extend: (props: AnyProps): string => (props.round ? 'border-radius: 500px;' : ''),
  },
  dataTable: {
    header: {
      border: null,
      pad: 'none',
    },
    body: {
      pad: {
        vertical: 'none',
        horizontal: 'none',
      },
    },
  },
  table: {
    header: {
      extend: (): string => `
        background: ${colors.tableHeaderBg};
        &:first-of-type > div {
          padding-left: 12px;
        }
      `,
    },
    body: {
      extend: (): string => `
        &:first-of-type {
          padding: 0 12px;
        }
      `,
    },
  },
  checkBox: {
    hover: { border: { color: 'brand' } },
  },
}

export default theme