// ctrl = html-element (inputRef.current)

export const getCaretPosition = ctrl => {
  let CaretPos = 0;

  if (ctrl.selectionStart || ctrl.selectionStart === 0) {
    // Standard.
    CaretPos = ctrl.selectionStart;
  } else if (document.selection) {
    // Legacy IE
    ctrl.focus();
    const Sel = document.selection.createRange();
    Sel.moveStart('character', -ctrl.value.length);
    CaretPos = Sel.text.length;
  }

  return CaretPos;
};

export const setCaretPosition = (ctrl, pos) => {
  if (ctrl.setSelectionRange) {
    ctrl.focus();
    ctrl.setSelectionRange(pos, pos);
  } else if (ctrl.createTextRange) {
    const range = ctrl.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
};

export const macRegex = /^[0-9A-F]$/;

import { useRef, useState } from 'react';
import styled from '@emotion/styled';
import { setCaretPosition, getCaretPosition } from 'shared/functions/inputUtils';
import { Input } from 'shared/styledTheme';
import { borderColor, boxShadowColor } from 'shared/styledTheme/Components/Input';

const Container = styled('div')`
  display: grid;
  align-items: center;
  justify-items: center;
  grid-template-columns: 1rem 1fr;
  grid-auto-flow: column;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin: 0px 5px;
  &:focus-within {
    border-color: ${borderColor};
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px ${boxShadowColor};
    outline: none;
  }
  ${props => (props.error ? `border-color: ${borderColor(props)};` : '')}
`;

const PlusDiv = styled('div')`
  font-weight: bold;
`;

const StyledInput = styled(Input)`
  justify-self: stretch;
  border: none;
  margin: 0;
`;

const PhoneNumberInput = ({ registerRef, onChange, onBlur, error, maxDigits = 15, ...rest }) => {
  const inputRef = useRef();
  const [isFocused, setIsFocused] = useState(false);

  const handleChange = e => {
    const {
      target: { value },
    } = e;
    const caretPos = getCaretPosition(inputRef.current);
    const valueNumbers = value.replace(/\D/g, '');
    const newCaretPos = caretPos - (value.length - valueNumbers.length);
    e.target.value = valueNumbers.substring(0, maxDigits);
    setCaretPosition(inputRef.current, newCaretPos);
    onChange(e);
  };

  return (
    <Container isFocused={isFocused} error={error}>
      <PlusDiv>+</PlusDiv>
//      <StyledInput
        <input 
        ref={e => {
          registerRef(e);
          inputRef.current = e;
        }}
        onFocus={() => {
          setIsFocused(true);
        }}
        onBlur={e => {
          setIsFocused(false);
          onBlur(e);
        }}
        onChange={handleChange}
        {...rest}
      />
    </Container>
  );
};

export default PhoneNumberInput;