import React from 'react';
import { G, Line } from 'react-native-svg';
import { ScaleLinear } from 'd3-scale';
import { Undefinable } from 'tsdef';
import { theme } from '../../app/theme';
import { fp as _ } from '../../common/utils/fp';
import { useNanoId } from '../../common/hooks/use-nano';

type TProps = {
  ticks: Undefinable<number>[];
  scale: ScaleLinear<number, number>;
  yOffset: number;
  color?: string;
  ticksVariant?: 'distributed' | 'edge';
};

export const XAxis: React.FC<TProps> = props => {
  const id = useNanoId();

  const { ticks, scale, yOffset, color, ticksVariant } = props;
  const lastIndex = _.length(ticks) - 1;

  return (
    <G>
      {ticks.map((tick, i) => {
        const position = scale(tick!)! + (i === lastIndex ? -1 : 0);

        if (ticksVariant !== 'distributed' && i > 0 && i < ticks.length - 1)
          return null;

        return (
          <G key={`${id}${position}`}>
            <Line
              y1={yOffset}
              y2={yOffset + 5}
              x1={position}
              x2={position}
              stroke={color}
              strokeWidth={2}
            />
          </G>
        );
      })}
    </G>
  );
};

XAxis.defaultProps = {
  color: theme.colors.waikawaGray,
  ticksVariant: 'distributed',
};