import React from 'react';
import { nanoid } from 'nanoid';
import { G, Line } from 'react-native-svg';
import { ScaleLinear } from 'd3-scale';
import { Undefinable } from 'tsdef';
import { theme } from '../../app/theme';

type TProps = {
  ticks: Undefinable<number>[];
  scale: ScaleLinear<number, number>;
  xOffsetRight: number;
  xOffset?: number;
  variant?: string;
  strokeWidth?: number;
};

export const YAxis: React.FC<TProps> = props => {
  const { ticks, scale, xOffsetRight, xOffset, variant, strokeWidth } = props;
  const latencyZeroLineShift = 2;

  return (
    <G>
      {ticks.map((tick, index) => {
        return (
          <G key={nanoid()}>
            <Line
              y1={
                variant === 'latency' && index === 0
                  ? scale(tick!)! - 2
                  : scale(tick!)
              }
              y2={
                variant === 'latency' && index === 0
                  ? scale(tick!)! - 2
                  : scale(tick!)
              }
              x1={
                variant === 'latency' && index === 0
                  ? (xOffset || 0) - latencyZeroLineShift
                  : xOffset || 0
              }
              x2={
                variant === 'latency' && index === 0
                  ? xOffsetRight + latencyZeroLineShift
                  : xOffsetRight
              }
              // @ts-ignore
              stroke={theme.colors.waikawaGray}
              {...(variant === 'latency'
                ? {
                    strokeWidth: index > 0 ? strokeWidth : undefined,
                    strokeLinecap: index > 0 ? 'round' : undefined,
                    stroke: theme.colors.snuff,
                  }
                : {})}
            />
          </G>
        );
      })}
    </G>
  );
};

YAxis.defaultProps = {
  strokeWidth: 5,
};