{"size": 3065, "ext": "js", "max_stars_repo_path": "src/components/Forms/SignatureCountSlider/index.js", "max_stars_repo_name": "grundeinkommensbuero/bb-platform", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Forms/SignatureCountSlider/index.js", "max_issues_repo_name": "grundeinkommensbuero/bb-platform", "max_issues_repo_issues_event_min_datetime": "2020-09-07T15:25:23.000Z", "max_issues_repo_issues_event_max_datetime": "2020-09-10T13:15:38.000Z", "max_forks_repo_path": "src/components/Forms/SignatureCountSlider/index.js", "max_forks_repo_name": "grundeinkommensbuero/bb-platform", "max_forks_repo_forks_event_min_datetime": "2020-09-08T10:34:04.000Z", "max_forks_repo_forks_event_max_datetime": "2020-09-08T10:34:04.000Z"}
{"max_stars_count": null, "max_issues_count": 2, "max_forks_count": 1, "avg_line_length": 22.3722627737, "max_line_length": 80, "alphanum_fraction": 0.5350734095}
import React from 'react';
import s from './style.module.less';
import { TextInputInline } from '../TextInput';
import cN from 'classnames';
import { shuffle } from '../../utils';

const HAND_ILLUSTRATIONS = [
  require('./hand_1.svg'),
  require('./hand_2.svg'),
  require('./hand_3.svg'),
  require('./hand_4.svg'),
  require('./hand_5.svg'),
  require('./hand_6.svg'),
];

const MAX_HANDS = 100;
const MAX_TILT = 10;

const HANDS_ARRAY = Array.apply(null, Array(MAX_HANDS)).map((hand, index) => {
  return {
    hand: Math.floor(Math.random() * HAND_ILLUSTRATIONS.length),
    tilt: Math.round(Math.random() * MAX_TILT),
    position: (1 / MAX_HANDS) * index,
    size: Math.random(),
  };
});

shuffle(HANDS_ARRAY);

HANDS_ARRAY.unshift({
  hand: Math.floor(Math.random() * HAND_ILLUSTRATIONS.length),
  tilt: Math.round(Math.random() * MAX_TILT),
  position: 0.75,
  size: Math.random(),
});

HANDS_ARRAY.unshift({
  hand: 1,
  tilt: Math.round(Math.random() * MAX_TILT),
  position: 0.25,
  size: Math.random(),
});

export const SignatureCountSlider = ({
  input,
  label,
  labelHidden,
  min,
  max,
  hide,
}) => {
  if (hide) {
    return null;
  }

  return (
    <>
      <label htmlFor={`slider_${input.name}`}>{label}</label>
      <div className={s.inputContainer}>
        <div className={s.sliderContainer}>
          <input
            className={s.input}
            id={`slider_${input.name}`}
            min={min}
            max={max}
            aria-label={label || labelHidden}
            {...input}
          />
        </div>
        <TextInputInline
          type="number"
          min={min}
          max={max}
          name={input.name}
          value={input.value}
          onBlur={input.onBlur}
          onChange={input.onChange}
          className={s.textInput}
          aria-label={label || labelHidden}
        />
      </div>
      <div
        className={cN(s.stage, {
          [s.many]: input.value > 50,
          [s.more]: input.value > 75,
        })}
        aria-hidden="true"
      >
        <div className={s.stageInner}>
          <div className={s.stageInnerInner}>
            {HANDS_ARRAY.map((hand, index) => (
              <Hand key={index} index={index} hand={hand} count={input.value} />
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

const Hand = ({ index, hand, count }) => {
  if (count < index + 1) {
    return null;
  }
  let style;
  let side;
  let position;

  if (hand.position < 0.5) {
    side = 'left';
    position = hand.position / 0.5;
  } else {
    side = 'right';
    position = (hand.position - 0.5) / 0.5;
  }

  if (side === 'bottom') {
    style = { left: position * 100 + '%' };
  } else {
    style = { bottom: position * 100 + '%' };
  }

  return (
    <div
      style={style}
      className={cN(s.handContainer, s[`handContainer_${side}`])}
    >
      <img
        className={s.hand}
        src={HAND_ILLUSTRATIONS[hand.hand]}
        style={{ transform: `translateY(${hand.size * -2}rem)` }}
        alt=""
      />
    </div>
  );
};
