import { useMemo } from 'react';
import uniq from 'lodash/uniq';
import cx from "../../../../../utils/css/cx.js";
import IfActive from "../../../../application/IfActive/index.js";
import classes from './styles.module.scss';
import valueToLabel from '../valueToLabel';
const cls = cx.merge(classes);
const Axis = function Axis(props) {
  const {
    scales,
    margins,
    sizes,
    range,
    disableYAxis,
    singleMode
  } = props;
  const {
    abbrYears,
    quarterTicks
  } = sizes;
  const {
    x,
    yInner
  } = scales;
  const years = uniq([...margins.map(s => s.year), range.y.max]);
  const ticks = useMemo(() => {
    const q1Value = Math.floor(range.x.min + (range.x.max - range.x.min) / 4);
    const halfValue = 0;
    const q3Value = Math.ceil(range.x.max - (range.x.max - range.x.min) / 4);
    const minLabel = valueToLabel(range.x.min);
    const q1Label = valueToLabel(q1Value);
    const q3Label = valueToLabel(q3Value);
    const maxLabel = valueToLabel(range.x.max);
    const minTick = {
      id: 'min',
      x: x(range.x.min),
      value: range.x.min,
      textAnchor: 'start',
      label: minLabel[0] + minLabel[1],
      class: minLabel[2]
    };
    const q1Tick = {
      id: 'q1',
      x: x(q1Value),
      value: q1Value,
      label: q1Label[1],
      class: q1Label[2]
    };
    const halfTick = {
      id: 'half',
      x: x(halfValue),
      class: 'dashed',
      value: halfValue,
      props: {
        strokeDasharray: '2 2'
      }
    };
    const q3Tick = {
      id: 'q3',
      x: x(q3Value),
      value: q3Value,
      label: q3Label[0] + q3Label[1],
      class: q3Label[2]
    };
    const maxTick = {
      id: 'max',
      x: x(range.x.max),
      value: range.x.max,
      textAnchor: 'end',
      label: quarterTicks ? maxLabel[1] : maxLabel[0] + maxLabel[1],
      class: maxLabel[2]
    };
    if (singleMode && !(range.x.min < 0 && range.x.max > 0)) {
      return [];
    }
    if (quarterTicks) {
      return [minTick, q1Tick, halfTick, q3Tick, maxTick];
    }
    return [minTick, halfTick, maxTick];
  }, [scales, range, singleMode]);
  return <g className="axis">
      <g className="ticks">
        {ticks.map(tick => <line key={tick.id} className={cls('tick', [tick.class])} x1={tick.x} x2={tick.x} y1={0} y2={yInner(range.y.max)} {...tick.props} />)}
      </g>

      <g className="x-axis">
        {ticks.map(tick => <IfActive key={tick.id} active={tick.label}>
            <text className={cls('x-axis-label', tick.class)} key={tick.id} x={tick.x} y={-6} textAnchor={tick.textAnchor || 'middle'} dominantBaseline="bottom">
              {tick.label}
            </text>
          </IfActive>)}
      </g>

      <IfActive active={!disableYAxis}>
        <g className="y-axis">
          {years.map(year => <text className={cls('y-axis-label')} key={year} x={-8} y={yInner(year) + 4} textAnchor="end">
              {abbrYears ? `'${`${year}`.substring(2)}` : year}
            </text>)}
        </g>
      </IfActive>
    </g>;
};
export default Axis;