import * as React from 'react'

import { colors } from './GraphHelperServiceTyped'
import TwoLineDateLabel from '../components/Charts/Labels/TwoLineDateLabel'

const colorsWithoutHash = colors.map((color) => color.slice(1))

export const cartesianGridProps = {
  vertical: false,
}

export function xAxisProps() {
  return {
    axisLine: false,
    tickCount: 8,
    domain: ['dataMin', 'dataMax'],
    type: 'category',
    interval: 'preserveStart',
    height: 45,
    tickLine: false,
    tickMargin: 10,
    tick: <TwoLineDateLabel x={0} y={0} payload={{ value: '' }} />,
  }
}

export const yAxisProps = {
  axisLine: false,
  tickLine: false,
  tickCount: 5,
  tickMargin: 5,
  width: 44,
  orientation: 'right',
  style: {
    fontSize: '12px',
    fill: 'rgb(116, 121, 157)',
  },
  type: 'number',
  domain: ['auto', 'auto'],
}

export function areaProps(colorIndex = 0) {
  const color = colors[colorIndex]
  return {
    type: 'monotone',
    fillOpacity: 1,
    fill: `url(${color})`,
    dot: false,
    strokeWidth: 4,
    connectNulls: true,
    activeDot: {
      stroke: color,
      fill: 'white',
      strokeWidth: 3,
      r: 4.6,
    },
    stroke: color,
    strokeLinecap: 'round',
    animationDuration: 1000,
  }
}

interface GradientProps {
  color: string
  index: number
}

export function linearGradient(params: GradientProps) {
  const { color, index } = params
  return (
    <linearGradient
      key={color}
      id={colorsWithoutHash[index]}
      x1='0'
      y1='0'
      x2='0'
      y2='1'
    >
      <stop
        offset='5%'
        stopColor={color}
        stopOpacity={color === 'FFF' ? 0 : 0.25}
      />
      <stop
        offset={color === 'FFF' ? '95%' : '100%'}
        stopColor={color}
        stopOpacity={0}
      />
    </linearGradient>
  )
}

export const areaChartProps = {
  margin: { top: 5, right: 5, left: 5, bottom: 5 },
}