import { createElement, forwardRef, HTMLAttributes, RefForwardingComponent, useContext } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import Context from './context';
import { handleMarks, isInRange, unit } from './utils';

export interface TrackProps extends HTMLAttributes<HTMLElement> {
  min?: number;
  max?: number;
  ratio?: number[];
  marks?: object;
  rangeWidth?: number;
}

const Track: RefForwardingComponent<any, TrackProps> = ({ min, max, ratio, marks, rangeWidth }, ref) => {
  const { styles } = useContext(Context);
  const markItems = [];
  const labelItems = [];

  handleMarks(marks).forEach((key) => {
    const left = ((key - min) / (max - min)) * rangeWidth;
    const isActive = isInRange((key - min) / (max - min), ratio);

    markItems.push(
      <View key={`mark-${key}`} style={{ ...(isActive ? styles.markActive : styles.mark), left: left + unit }} />
    );

    labelItems.push(
      <View key={`label-${key}`} style={{ ...(isActive ? styles.labelActive : styles.label), left: left + unit }}>
        <Text>{marks[key]}</Text>
      </View>
    );
  });

  const selectedLeft = ratio.length === 2 ? ratio[0] * rangeWidth : 0;
  const width = ratio.length === 2 ? Math.abs(ratio[1] - ratio[0]) * rangeWidth : ratio[0] * rangeWidth;

  return (
    <View ref={ref} style={{ ...styles.track }}>
      <View
        ref={ref}
        style={{
          ...styles.trackSelected,
          left: selectedLeft + unit,
          width: width + unit,
        }}
      />
      <View>{markItems}</View>
      <View>{labelItems}</View>
    </View>
  );
};

export default forwardRef<any, TrackProps>(Track);