import React, { useEffect, useState } from 'react'
import { Card } from '../Сard'
import { Loader } from '../Loader'
import { machine } from '../../questionnaireMachine'
import './style.css'
export const Questionnaire = () => {
  const [uiState, setUiState] = useState(machine.state)
  useEffect(() => {
    machine.subscribe((state) => setUISstate(state))
  }, [])
  return (
    <div className="questionnaire">
      <Card
        active={uiState === 'initial'}
        next={{ action: () => machine.send('start'), content: 'Start' }}
        subtitle="Thank you for taking part in our survey"
        title="Survey"
      />
      <Card
        active={uiState === 'personal'}
        next={{ action: () => machine.send('next'), content: 'Next' }}
        subtitle="Tell us about you!"
        title="Personal"
      >
        <div className="input-group">
          <label htmlFor="name" className="label">
            Name
          </label>
          <input type="text" placeholder="Floppa" id="name" className="input" />
        </div>
      </Card>
      <Card
        active={uiState === 'occupation'}
        prev={{ action: () => machine.send('back'), content: 'Back' }}
        subtitle="Do you work or study?"
        title="Occupation"
      >
        <div className="input-group">
          <label htmlFor="occupationStudent" className="label-radio">
            <input
              type="radio"
              name="occupation"
              id="occupationStudent"
              className="input-radio"
              onChange={() => machine.send('education')}
            />
            <span className="label-radio__toggler"></span>
            <span className="label-radio__content">Student</span>
          </label>
        </div>
        <div className="input-group">
          <label htmlFor="occupationWorker" className="label-radio">
            <input
              type="radio"
              name="occupation"
              id="occupationWorker"
              className="input-radio"
              onChange={() => machine.send('work')}
            />
            <span className="label-radio__toggler"></span>
            <span className="label-radio__content">Worker</span>
          </label>
        </div>
      </Card>
      <Card
        active={uiState === 'work'}
        next={{
          action: () => {
            machine.send('send')
            setTimeout(() => machine.send('success'), 1500)
          },
          content: 'Send survey'
        }}
        prev={{ action: () => machine.send('back'), content: 'Back' }}
        subtitle="Wow! What's your job?"
        title="Work"
      >
        <div className="input-group">
          <label htmlFor="job" className="label">
            Job
          </label>
          <input type="text" placeholder="Caracal" id="job" className="input" />
        </div>
      </Card>
      <Card
        active={uiState === 'education'}
        next={{
          action: () => {
            machine.send('send')
            setTimeout(() => machine.send('success'), 1500)
          },
          content: 'Send survey'
        }}
        prev={{ action: () => machine.send('back'), content: 'Back' }}
        subtitle="That's great! What's your future profession?"
        title="Education"
      >
        <div className="input-group">
          <label htmlFor="profession" className="label">
            Profession
          </label>
          <input
            type="text"
            placeholder="Meme"
            id="profession"
            className="input"
          />
        </div>
      </Card>
      {uiState === 'loading' && <Loader />}
      <Card
        active={uiState === 'success'}
        prev={{
          action: () => machine.send('reset'),
          content: 'Take another survey'
        }}
        subtitle="Thank you for your response! Want another survey?"
        title="We got it!"
      />
    </div>
  )
}

.questionnaire {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 30em;
  height: 30em;
  transform: translate(-50%, -50%);
}

import React from 'react'
import './style.css'
export const Loader = () => {
  return (
    <div className="loader">
      <span className="loader__element animate__animated animate__bounce animate__infinite"></span>
    </div>
  )
}

.loader {
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loader__element {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #fff;
}

import { Questionnaire } from './components/Questionnaire'
import 'animate.css'
import './styles.css'
export default function App() {
  return <Questionnaire />
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
* {
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #4a90e2;
}
.input-group:not(:last-child) {
  margin-bottom: 1em;
}
.label {
  display: block;
  margin-bottom: 0.75em;
  padding-left: 1.25em;
  font-size: 0.875em;
}
.input {
  width: 100%;
  padding: 1em;
  border-radius: 1.5em;
  border: 0.125em solid transparent;
  outline: 0;
  background-color: #f0f4fd;
  font-size: 1em;
}
.input::placeholder {
  color: #d8d8d8;
  opacity: 1;
}
.input:focus {
  border-color: #4a90e2;
}
.input-radio {
  display: none;
}
.label-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.label-radio__toggler {
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  border-radius: 50%;
  border: 0.125em solid #bbb;
  transition: border-color 0.3s ease;
}
.label-radio:hover .label-radio__toggler {
  border-color: #4a90e2;
}