import React from 'react';
import { bool, string, number, func, oneOfType } from 'prop-types';
import { Field } from 'redux-form';
import styled from 'styled-components';
import { COLOR_PRIMARY, COLOR_PRIMARY_ACTIVE, COLOR_FORM_FIELD_BORDER_IN_COMBO } from '@vincent_za/styles';

import TextField from '../TextField/component';

const STYLE_THUMB_SIZE = '1.2rem';
const STYLES_TRACK = `
  width: 100%;
  height: 1px;
  background-color: transparent;
  box-shadow: 0 1px 0 0 ${COLOR_FORM_FIELD_BORDER_IN_COMBO};
`;

const STYLES_THUMB = `
  position: relative;
  z-index: 1;
  margin-top: 1px;
  width: ${STYLE_THUMB_SIZE};
  height: ${STYLE_THUMB_SIZE};
  border-radius: 50%;
  background-color: ${COLOR_PRIMARY};
  cursor: pointer;
  transform: translateY(-50%);
  transition: box-shadow 0.2s ease-out;

  &:active {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
    background-color: ${COLOR_PRIMARY_ACTIVE};
  }
`;

const Wrap = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-grow: 1;
  position: relative;
`;

const Label = styled.label`
  display: ${props => props.isVisible ? 'block' : 'none'};
`;

const ProgressBar = styled.div`
  position: absolute;
  bottom: -1px;
  width: ${props => props.width}%;
  height: 1px;
  background-color: ${COLOR_PRIMARY};
`;

const Slider = styled.input`
  -webkit-appearance: none;
  margin: 0;
  width: 100%;
  background-color: transparent;

  &:focus {
    outline: none;
  }

  &::-moz-slider-runnable-track {
    ${STYLES_TRACK};
  }

  &::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    ${STYLES_TRACK};
  }

  &::-moz-range-thumb {
    ${STYLES_THUMB};
  }

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    ${STYLES_THUMB};
  }

  &:active + ${ProgressBar} {
    background-color: ${COLOR_PRIMARY_ACTIVE};
  }
`;

class Range extends React.PureComponent {
  render() {
    const {
      isRFFWrap,
      label,
      className,
      value,
      fieldName,
      step,
      id,
      onChange,
    } = this.props;

    return (
      <Wrap className={className}>
        <Label htmlFor={fieldName} isVisible={label}>{label}</Label>
        <Slider
          type="range"
          id={id || fieldName}
          name={fieldName}
          step={step}
          value={value || 0}
          onChange={onChange}
        />
        <ProgressBar isVisible={value} width={value || 0} />
        {
          isRFFWrap &&
          <Field
            isHidden
            name={fieldName}
            id={id || fieldName}
            component={TextField}
          />
        }
      </Wrap>
    );
  }
}

Range.propTypes = {
  isRFFWrap: bool,
  label: string,
  className: string,
  value: oneOfType([number, string]),
  fieldName: string,
  step: number,
  id: string,
  onChange: func,
};

Range.defaultProps = {
  isRFFWrap: false,
  label: undefined,
  className: '',
  fieldName: undefined,
  value: 0,
  step: 1,
  id: undefined,
  onChange() {},
};

export default Range;
