// App.tsx
const App = () => {
    return (
        <Container>
            <form onSubmit={onSubmit}>
                {/*...*/}
            </form>
            <Processes process={process} />
            <Result result={result} />
        </Container>
    )

const [carNames, setCarNames] = useState('')
const [count, setCount] = useState('')

const onChangeCarNames = useCallback(e => {
  setCarNames(e.target.value)
}, [])

const onChangeCount = useCallback(e => {
  setCount(e.target.value)
}, [])

return (
  <input id="carNames" type="text" value={carNames} onChange={onChangeCarNames}></input>
  <input id="count" type="text" value={count} onChange={onChangeCount}></input>
)

// formValidator.ts

const validateInput = (carNames: string, count: string) => {
  let _carNames = carNames.split(',')
  _carNames = trimCarNameBlank(_carNames)
  _carNames = _carNames.filter(v => v !== '')

  if (_carNames.length === 0) {
    return 'CAR_NAME_IS_BLANK_ERROR'
  }

  if (count === '') {
    return 'COUNT_IS_BLANK_ERROR'
  }

  if (!checkCarNameLength(_carNames)) {
    return 'CAR_NAME_LENGTH_ERROR'
  }

  if (!checkCountIsNumber(count)) {
    return 'COUNT_IS_NOT_NUMBER_ERROR'
  }
  return _carNames
}

const checkCarNameLength = (carNames: string[]) => {
  const MAX_CARNAME_LENGTH = 5
  for (let i = 0; i < carNames.length; i++) {
    if (carNames[i].length > MAX_CARNAME_LENGTH) return false
  }
  return true
}

const trimCarNameBlank = (carNames: string[]) => {
  return carNames.map(carName => carName.trim())
}

const checkCountIsNumber = (count: string) => {
  if (count.match(/\D/g)) return false
  return true
}

export {
  validateInput,
  checkCarNameLength,
  trimCarNameBlank,
  checkCountIsNumber,
}

// App.tsx

import { validateInput } from '../modules/formValidator'

const validator = validateInput(carNames, count)
if (validator === 'CAR_NAME_IS_BLANK_ERROR') {
  return setCarNameIsBlankError(true)
}
if (validator === 'COUNT_IS_BLANK_ERROR') {
  return setCountIsBlankError(true)
}
if (validator === 'CAR_NAME_LENGTH_ERROR') {
  return setCarNameLengthError(true)
}
if (validator === 'COUNT_IS_NOT_NUMBER_ERROR') {
  return setCountIsNotNumberError(true)
}
const _carNames = validator

// App.tsx

return (
  <div>
    {carNameLengthError && (
      <div style={{ color: 'red' }}>에러! 자동차이름은 5이하로 해야합니다</div>
    )}
    {carNameIsBlankError && (
      <div style={{ color: 'red' }}>
        에러! 자동차이름은 공백이 될 수 없습니다
      </div>
    )}
    {countIsBlankError && (
      <div style={{ color: 'blue' }}>
        에러! 시도할 횟수는 공백이 될 수 없습니다
      </div>
    )}
    {countIsNotNumberError && (
      <div style={{ color: 'blue' }}>에러! 시도할 횟수는 숫자를 입력하세오</div>
    )}
  </div>
)

// App.tsx

const onSubmit = useCallback(
  e => {
    e.preventDefault()

    setCarNameIsBlankError(false)
    setCarNameLengthError(false)
    setCountIsBlankError(false)
    setCountIsNotNumberError(false)
  },
  [carNames, count]
)

// Car.ts

export default class Car {
  name: string
  position = 0

  constructor(name: string) {
    this.name = name
  }
  go() {
    this.position = this.position + 1
  }
}

const makeCars = (carNames: string[]) => {
  const _cars = []
  for (let i = 0; i < carNames.length; i++) {
    _cars.push(new Car(carNames[i]))
  }
  return _cars
}

const cars = makeCars(carNames)

const [process, setProcess] = useState<null | JSX.Element>(null)
const [result, setResult] = useState<null | JSX.Element>(null)

let _count = Number(count)
for (let i = 0; i < _count; i++) {
  timer = setTimeout(() => {
    moveCars(cars)
    setProcess(makeProcess(i, cars))
    if (i === _count - 1) {
      setResult(makeResult(cars))
    }
  }, 1000 * i)
}

// racingCarModule
{
moveCars : '자동차들 이동',
moveCar  : '자동차 객체 하나 이동',
checkMoveCarCondition : '자동차가 이동할지말지 조건처리',
makeProcess : '자동차 이동거리에 대한 출력(jsx) 리턴',
makeDistance : '자동차 이동거리(-) 문자열 리턴',
makeResult : '최종 결과에 대한 출력(jsx) 리턴',
getWinner : 'position값이 가장 큰 자동차 리턴',
}

import {
  checkCarNameLength,
  trimCarNameBlank,
  checkCountIsNumber,
  validateInput,
} from './formValidator'

describe('validateInput 함수', () => {
  it('빈문자열일 때, 잘 걸러내는지 확인', () => {
    expect(validateInput('', '')).toBe('CAR_NAME_IS_BLANK_ERROR')
  })
  it('자동차이름길이가 5초과할 경우 잘 걸러내는지 확인', () => {
    expect(validateInput('123456', '')).toBe('CAR_NAME_LENGTH_ERROR')
  })
  it('시도할 횟수가 숫자가 아닐 경우 잘 제거되는지 확인', () => {
    expect(validateInput('126,a', 'aa')).toBe('COUNT_IS_NOT_NUMBER_ERROR')
  })
})

describe('checkCarNameLength 함수', () => {
  it('자동차이름길이가 5초과할 경우 잘 걸러내는지 확인', () => {
    expect(checkCarNameLength(['123456', '123'])).toBe(false)
  })
})

describe('trimCarNameBlank 함수', () => {
  it('자동차이름이 공백일 경우 잘 제거되는지 확인', () => {
    expect(trimCarNameBlank(['   ', ' '])).toStrictEqual(['', ''])
  })
})

describe('checkCountIsNumber 함수', () => {
  it('시도할 횟수가 숫자가 아닐 경우 잘 제거되는지 확인', () => {
    expect(checkCountIsNumber('ㅁ')).toStrictEqual(false)
  })
  it('시도할 횟수가 숫자가 아닐 경우 잘 제거되는지 확인', () => {
    expect(checkCountIsNumber('123a')).toStrictEqual(false)
  })
  it('시도할 횟수가 숫자가 아닐 경우 잘 제거되는지 확인', () => {
    expect(checkCountIsNumber('123')).toStrictEqual(true)
  })
})