import React from 'react'
import useTheme from '../use-theme'
import { useProportions } from '../utils/calculations'
import { NormalTypes } from '../utils/prop-types'
import withDefaults from '../utils/with-defaults'

export type ProgressColors = {
  [key: number]: string
}

interface Props {
  value?: number
  max?: number
  fixedTop?: boolean
  fixedBottom?: boolean
  colors?: ProgressColors
  color?: string
  type?: NormalTypes
  className?: ''
}

const defaultProps = {
  value: 0,
  max: 100,
  type: 'default' as NormalTypes,
  fixedTop: false,
  fixedBottom: false,
  className: ''
}

type NativeAttrs = Omit<React.ProgressHTMLAttributes<any>, keyof Props>
export type ProgressProps = Props & typeof defaultProps & NativeAttrs

const getCurrentColor = (ratio: number, type: NormalTypes, colors: ProgressColors = {}): string => {
  const defaultColors: { [key in NormalTypes]: string } = {
    default: 'var(--token-color-global-grayscale-11)',
    success: 'var(--token-color-system-success-10)',
    secondary: 'var(--token-color-global-grayscale-10)',
    warning: 'var(--token-color-system-warn-10)',
    error: 'var(--token-color-system-error-10)'
  }
  const colorKeys = Object.keys(colors)
  if (colorKeys.length === 0) return defaultColors[type]

  const customColorKey = colorKeys.find((key) => ratio <= +key)
  if (!customColorKey || Number.isNaN(+customColorKey)) return defaultColors[type]
  return colors[+customColorKey]
}

const Progress: React.FC<ProgressProps> = ({
  value,
  max,
  className,
  type,
  colors,
  color,
  fixedTop,
  fixedBottom,
  ...props
}) => {
  const theme = useTheme()
  const percentValue = useProportions(value, max)
  const currentColor = color ? color : getCurrentColor(percentValue, type, colors)
  const fixed = fixedTop || fixedBottom

  return (
    <div className={`progress ${className} ${fixed ? 'fixed' : ''}`}>
      <div className="inner" title={`${percentValue}%`} />
      <progress className={className} value={value} max={max} {...props} />
      <style jsx>{`
        progress {
          position: fixed;
          top: -1000px;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
        }

        .progress {
          position: relative;
          width: 100%;
          height: 0.625rem;
          background-color: ${theme.palette.accents_2};
          border-radius: ${theme.layout.radius};
        }

        .fixed {
          position: fixed;
          top: ${fixedTop ? 0 : 'unset'};
          bottom: ${fixedBottom ? 0 : 'unset'};
          left: 0;
          border-radius: 0;
        }

        .fixed > .inner {
          border-radius: 0;
        }

        .inner {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          bottom: 0;
          transition: all 100ms ease-in;
          border-radius: ${theme.layout.radius};
          background-color: ${currentColor};
          width: ${percentValue}%;
        }
      `}</style>
    </div>
  )
}

export default withDefaults(Progress, defaultProps)