<commit_before>/** @jsx jsx */

import React, { useEffect } from 'react' //eslint-disable-line
import { jsx, Styled } from 'theme-ui'
import styled from '@emotion/styled'
import PropTypes from 'prop-types'

const Modal = styled.div`
  position: absolute;
  top: 0;
  content: '';
  transition: all 0.3s;
  z-index: 2;
  background: black;
  width: 100%;
  height: 100%;
  opacity: ${props => (props.visible ? '1' : '0')};
  visibility: ${props => (props.visible ? 'visible' : 'hidden')};
  section {
    p {
      line-height: 1.6;
      margin: 0 0 2em 0;
      text-align: center;
    }
  }
`

const Form = styled.form`
  position: relative;
  width: 100%;
  label {
    padding: 0 16px;
  }
  input,
  textarea {
    padding: 12px;
    color: ${props => props.theme.colors.text};
    background: ${props => props.theme.colors.secondary};
    &::placeholder {
      color: ${props => props.theme.colors.shadow};
    }
    &:last-child {
      color: ${props => props.theme.colors.text};
      background: ${props => props.theme.colors.shadow};
    }
  }

  &::invalid {
    box-shadow: none;
  }
  &::required {
    box-shadow: none;
  }
  &::optional {
    box-shadow: none;
  }
`

const Input = styled.input`
  margin: 0 0 8px;
  width: 100%;
`
const TextArea = styled.textarea`
  margin: 0 0 8px;
  width: 100%;
`

const Submit = styled.input`
  cursor: pointer;
  transition: 0.2s;
  width: 100%;
  font-weight: bold;
`

class EmailCapture extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '',
      email: '',
      restaurant: '',
      address: '',
      notes: '',
      tags: [
        {
          name: 'Covid',
        },
      ],
      showModal: false,
      showPrompt: true,
    }
  }

  handleInputChange = event => {
    const target = event.target
    const value = target.value
    const email = target.email
    const name = target.name
    const restaurant = target.restaurant
    const address = target.address
    const notes = target.notes
    const tags = [
      {
        name: 'Covid',
      },
    ]
    this.setState({
      [email]: value,
      [name]: value,
      [restaurant]: value,
      [address]: value,
      [notes]: value,
      [tags]: value,
    })
  }

  componentDidMount() {
    this.handleSubmit = event => {
      event.preventDefault()
      this.handleSuccess()
      window.analytics.identify({
        email: this.state.email,
        name: this.state.name,
        restaurant: this.state.restaurant,
        address: this.state.address,
        notes: this.state.notes,
        tags: [
          {
            name: 'Covid',
          },
        ],
      })
    }
  }

  handleSuccess = () => {
    this.setState({
      email: '',
      name: '',
      restaurant: '',
      address: '',
      notes: '',
      tags: [
        {
          name: 'Covid',
        },
      ],
      showModal: true,
      showPrompt: false,
    })
  }

  closeModal = () => {
    this.setState({ showModal: false, showPrompt: true })
  }

  render(props) {
    return (
      <>
        <Form
          name="subscribe"
          onSubmit={this.handleSubmit}
          overlay={this.state.visible}
          onClick={this.closeModal}
        >
          <Modal visible={this.state.showModal}>
            <hr></hr>
            <Styled.h2 sx={{ fontFamily: 'monospace', color: 'white' }}>
              Thanks for reaching out.
            </Styled.h2>
            <Styled.p sx={{ fontFamily: 'monospace', color: 'white' }}><commit_msg>Remove tags in favor of a better solution<commit_after>/** @jsx jsx */

import React, { useEffect } from 'react' //eslint-disable-line
import { jsx, Styled } from 'theme-ui'
import styled from '@emotion/styled'
import PropTypes from 'prop-types'

const Modal = styled.div`
  position: absolute;
  top: 0;
  content: '';
  transition: all 0.3s;
  z-index: 2;
  background: black;
  width: 100%;
  height: 100%;
  opacity: ${props => (props.visible ? '1' : '0')};
  visibility: ${props => (props.visible ? 'visible' : 'hidden')};
  section {
    p {
      line-height: 1.6;
      margin: 0 0 2em 0;
      text-align: center;
    }
  }
`

const Form = styled.form`
  position: relative;
  width: 100%;
  label {
    padding: 0 16px;
  }
  input,
  textarea {
    padding: 12px;
    color: ${props => props.theme.colors.text};
    background: ${props => props.theme.colors.secondary};
    &::placeholder {
      color: ${props => props.theme.colors.shadow};
    }
    &:last-child {
      color: ${props => props.theme.colors.text};
      background: ${props => props.theme.colors.shadow};
    }
  }

  &::invalid {
    box-shadow: none;
  }
  &::required {
    box-shadow: none;
  }
  &::optional {
    box-shadow: none;
  }
`

const Input = styled.input`
  margin: 0 0 8px;
  width: 100%;
`
const TextArea = styled.textarea`
  margin: 0 0 8px;
  width: 100%;
`

const Submit = styled.input`
  cursor: pointer;
  transition: 0.2s;
  width: 100%;
  font-weight: bold;
`

class EmailCapture extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: '',
      email: '',
      restaurant: '',
      address: '',
      notes: '',
      showModal: false,
      showPrompt: true,
    }
  }

  handleInputChange = event => {
    const target = event.target
    const value = target.value
    const email = target.email
    const name = target.name
    const restaurant = target.restaurant
    const address = target.address
    const notes = target.notes
    this.setState({
      [email]: value,
      [name]: value,
      [restaurant]: value,
      [address]: value,
      [notes]: value,
    })
  }

  componentDidMount() {
    this.handleSubmit = event => {
      event.preventDefault()
      this.handleSuccess()
      window.analytics.identify({
        email: this.state.email,
        name: this.state.name,
        restaurant: this.state.restaurant,
        address: this.state.address,
        notes: this.state.notes,
        tags: [
          {
            name: 'Covid',
          },
        ],
      })
    }
  }

  handleSuccess = () => {
    this.setState({
      email: '',
      name: '',
      restaurant: '',
      address: '',
      notes: '',
      showModal: true,
      showPrompt: false,
    })
  }

  closeModal = () => {
    this.setState({ showModal: false, showPrompt: true })
  }

  render(props) {
    return (
      <>
        <Form
          name="subscribe"
          onSubmit={this.handleSubmit}
          overlay={this.state.visible}
          onClick={this.closeModal}
        >
          <Modal visible={this.state.showModal}>
            <hr></hr>
            <Styled.h2 sx={{ fontFamily: 'monospace', color: 'white' }}>
              Thanks for reaching out.
            </Styled.h2>
            <Styled.p sx={{ fontFamily: 'monospace', color: 'white' }}>
{'fraction_non_alphanumeric': 0.14903565166569258, 'fraction_numerical': 0.013150204558737581, 'mean_word_length': 2.059901654000894, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2246380', 'n_tokens_mistral': 2306, 'n_tokens_neox': 2217, 'n_words': 509}