import React from 'react'
import Button from 'react-bootstrap/Button'

export interface IAccessCodeSectionProps {
  code: string;
  setCode: (value: string) => void;
  updateTickets: (value: boolean) => void;
}

// This section is seperate because additional changes layter may be applied to Access Code

export const AccessCodeSection = ({
  code,
  setCode,
  updateTickets
}: IAccessCodeSectionProps) => {
  const isAccessCodeHasValue = !!code.trim()

  return (
    <div className="access-code-block">
      <div className="access-code-block">
        <p className="access-code-text">
          Access code required
        </p>
      </div>
      <input
        className="access-code-input"
        placeholder=""
        onChange={e => {
          setCode(e.target.value)
        }}
        onKeyPress={event => {
          if (event.key === 'Enter' && isAccessCodeHasValue) {
            updateTickets(true)
          }
        }}
      />
      <Button
        className="access-submit-button"
        onClick={() => {
          if (isAccessCodeHasValue) {
            updateTickets(true)
          }
        }}
      >
        ENTER
      </Button>
    </div>
  )
}