'use client';
 
import { useState } from 'react';
import styled, { keyframes } from 'styled-components';
 
//import Modal
import { Modal } from '@/components/Modal';
 
// import UserRole enum from Keel Client
import { UserRole } from '@/utils/keelClient';
 
function HomePage() {
 
  //Add to the existing state objects
  const [role, setRole] = useState<UserRole>(UserRole.Customer);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [name, setName] = useState('');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
 
	// Create user function
  const handleCreateUser = async (e: { preventDefault: () => void }) => {
    e.preventDefault();
 
    try {
			// Call the Keel-generated createUser function from the Keel Client
      const response = await keel.api.mutations.createUser({ name: name, role: role });
      if (response && !response.error) {
        setMessage(`User ${response.data?.name} with a ${response.data?.role} role has been created successfully!`);
        setIsModalOpen(true);
      } else {
        setMessage('Failed to create user.' + response.error?.message);
      }
    } catch (error) {
      setMessage(`${error}`);
    }
  };
 
// UX improvement to clear the input field after the modal is closed
  const closeModalAndClearInput = () => {
    setIsModalOpen(false);
    setName('');
    setRole(UserRole.Customer);
  };
 
  return (
    <div>
      {!isLoggedIn ? (
        <Container>{/*your existing login form*/}</Container>
      ) : (
    // create user form
        <Container>
          <form onSubmit={handleCreateUser}>
            <H2>Create User</H2>
            <div>
              <label>
                Name
                <Input type="text" value={name} onChange={(e) => setName(e.target.value)} />
              </label>
            </div>
            <div>
              <label>
                Role
                <Select value={role} onChange={(e) => setRole(e.target.value as UserRole)}>
                  {Object.values(UserRole).map((roleValue) => (
                    <option key={roleValue} value={roleValue}>
                      {roleValue}
                    </option>
                  ))}
                </Select>
              </label>
            </div>
            <div>
              <Button type="submit">Create User</Button>
            </div>
          </form>
        </Container>
      )}
      {isModalOpen && <Modal message={message} onClose={closeModalAndClearInput} />}
    </div>
  );
}
// rest of your styling
 
 
//style the select tag
const Select = styled.select`
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #ddd;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  appearance: none; // this will remove the default arrow in some browsers
  animation: ${slideIn} 0.5s ease-in-out;
 
  &:focus {
    outline: none;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1), -2px -2px 4px rgba(255, 255, 255, 0.5);
  }
 
  option {
    color: #333;
    background-color: #fff;
  }
`;
 
export default HomePage

const handleCreateUser = async (e: { preventDefault: () => void }) => {
    e.preventDefault();
 
    try {
      const response = await keel.api.mutations.createUser({ name: name, role: role });
      if (response && !response.error) {
        setMessage(`User ${response.data?.name} with a ${response.data?.role} role has been created successfully!`);
        setIsModalOpen(true);
      } else {
        setMessage('Failed to create user.' + response.error?.message);
      }
    } catch (error) {
      setMessage(`${error}`);
    }
  };