import { createElement, forwardRef, HTMLAttributes, Fragment, RefForwardingComponent, useContext } from 'rax';
import { StyledComponentProps } from '@rax-ui/styles';
import View from 'rax-view';
import Text from 'rax-text';
import Context from './context';
import { isNil, unit } from './utils';

export interface ThumbProps extends HTMLAttributes<HTMLElement>, StyledComponentProps<any> {
  offset?: number;
  isActive?: boolean;
  tooltipVisible?: boolean;
  value?: number;
}

const Thumb: RefForwardingComponent<any, ThumbProps> = ({ offset, isActive, tooltipVisible, value }, ref) => {
  const { styles } = useContext(Context);

  let display: string;

  if (!isNil(tooltipVisible)) {
    display = tooltipVisible ? 'flex' : 'none';
  } else {
    display = isActive ? 'flex' : 'none';
  }

  const thumbStyle = isActive ? styles.thumbActive : styles.thumb;

  return (
    <View style={{ ...thumbStyle, left: offset + unit }} ref={ref}>
      {display === 'flex' && (
        <Fragment>
          <View style={styles.tooltip}>
            <Text>{`${value}`}</Text>
          </View>
          <View style={styles.arrow} />
        </Fragment>
      )}
    </View>
  );
};

Thumb.defaultProps = {
  offset: 0,
};

export default forwardRef<any, ThumbProps>(Thumb);