contact.js

import React, { useState, useEffect } from 'react'
import { Form } from 'react-bootstrap'
import styled from 'styled-components'
import { Formik } from 'formik'
import * as Yup from 'yup'

const Nfocused = `10px 10px 30px #5f1488, -10px -10px 50px #811cb8`
const focused = `inset -10px -10px 30px #5f1488,  inset 10px 10px 50px #811cb8`

const Transit = styled.div`
  display: flex;
  height: 48px;
  background: linear-gradient(to top, black, rgb(241, 0, 0), white);
`

const Outer = styled.div`
  background-color: black;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  padding-bottom: 70px;
  justify-content: center;
  padding-left: 100px;
`

const InnerOut = styled.div`
  background: #7018a0;
  position: static;
  margin-top: 70px;
  right: 30px;
  border-radius: 50px;

  width: 137mm;
`
const ContactInner = styled.div`
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  margin-left: 5px;
`
export default function Contact({ onDirty }) {
  const [focusedRef, setFocusedRef] = useState(false)
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [number, setNumber] = useState('')
  const [details, setDetails] = useState('')
  const handleChange = (event) => {
    setName(event.target.value)
  }
  const handleChange1 = (event) => {
    setEmail(event.target.value)
  }
  const handleChange2 = (event) => {
    setNumber(event.target.value)
  }
  const handleChange3 = (event) => {
    setDetails(event.target.value)
  }
  const handleSubmit = (event) => {
    event.preventDefault()
  }
  // function handleRef(event) {
  //   if (input) {
  //     console.log('is focused')
  //   }
  // }
  useEffect(() => {
    if (focusedRef) {
      setFocusedRef(true)
    } else {
      setFocusedRef(false)
    }
  }, [focusedRef])
  const Inner = styled.div`
    display: flex;
    flex-direction: column;
    border-radius: 50px;
    background: #7018a0;
    box-shadow: ${focusedRef ? focused : Nfocused};
    position: relative;
    top: 15px;
    left: 13px;
    width: 130mm;
  `
  return (
    <div className="contact">
      <Transit> </Transit>
      <Outer>
        <InnerOut>
          <Inner className="inner">
            <h1 className="hr5"> Contact Me </h1>
            <Formik
              initialValues={{
                name: '',
                email: '',
                acceptedTerms: false,
                specialPower: '',
              }}
              validationSchema={Yup.object({
                name: Yup.string()
                  .min(3, 'Must be atleast 3 chars')
                  .max(15, 'Must be 15 chars or less')
                  .required('required'),
                email: Yup.string()
                  .email('Invalid email address')
                  .required('Required'),
                acceptedTerms: Yup.boolean()
                  .required('Required')
                  .oneOf([true], 'You must accept the terms and conditions'),
                specialPower: Yup.string()
                  .oneOf(
                    ['flight', 'invisibility', 'wealthy bat guy', 'other'],
                    'Invalid special power',
                  )
                  .required('required'),
              })}
              onSubmit={(values, { setSubmitting, resetForm }) => {
                setTimeout(() => {
                  alert(JSON.stringify(values, null, 2))
                  resetForm()
                  setSubmitting(false)
                }, 5000)
              }}
            >
              <Form onSubmit={handleSubmit} className="form" noValidate>
                <Form.Group>
                  <Form.Label className="label lab1"> Name: </Form.Label>
                  <Form.Control
                    type="text"
                    placeholder="Enter your name..."
                    onChange={handleChange}
                    value={name}
                    className="form-control"
                  />
                </Form.Group>
                <ContactInner>
                  <Form.Group>
                    <Form.Label className="label lab">
                      {' '}
                      Email Address:{' '}
                    </Form.Label>
                    <Form.Control
                      type="email"
                      placeholder="Email Address..."
                      onChange={handleChange1}
                      value={email}
                      className="form-control ctrl1"
                      onFocus={(e) => {
                        setFocusedRef(true)
                      }}
                      onBlur={() => {
                        setFocusedRef(false)
                      }}
                    />
                  </Form.Group>
                  <Form.Group>
                    <Form.Label className="label lab">
                      {' '}
                      Phone Number:{' '}
                    </Form.Label>
                    <Form.Control
                      type="text"
                      placeholder="Phone Number..."
                      onChange={handleChange2}
                      value={number}
                      className="form-control ctrl2"
                      onFocus={(e) => {
                        setFocusedRef(true)
                      }}
                      onBlur={() => {
                        setFocusedRef(false)
                      }}
                    />
                  </Form.Group>
                </ContactInner>
                <Form.Group>
                  <Form.Label className="label lab1">
                    {' '}
                    Project Details:{' '}
                  </Form.Label>
                  <Form.Control
                    as="textarea"
                    placeholder="Tell me about your project..."
                    onChange={handleChange3}
                    value={details}
                    className="form-control"
                    onFocus={(e) => {
                      setFocusedRef(true)
                    }}
                    onBlur={() => {
                      setFocusedRef(false)
                    }}
                  />
                </Form.Group>
                <button onSubmit={handleSubmit} className="btn btn1">
                  Submit
                </button>
              </Form>
            </Formik>
          </Inner>
        </InnerOut>
      </Outer>
    </div>
  )
}