import { useState } from 'react';
import { useLoaderData } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { ICustomerDashboardData } from '../../services/CustomerDashboard/CustomerDashboard';
import { useAuth } from '../../hooks/useAuth';
import FlightCard from './FlightCard/FlightCard';
import avatar from './avatar.jpg';
import './CustomerDashboard.scss';

interface ICustomerDashboardForm {
  name: string;
  email: string;
  password: string;
  confirmPassword: string;
}

function CustomerDashboard() {
  const [error, setError] = useState('');
  const [disabled, setDisabled] = useState(true);
  const { user } = useAuth();
  const data = useLoaderData() as ICustomerDashboardData;
  const formValues: ICustomerDashboardForm = {
    name: user?.username ?? '',
    email: user?.email ?? '',
    password: '',
    confirmPassword: ''
  };
  const { register, handleSubmit } = useForm<ICustomerDashboardForm>({mode: 'onChange', defaultValues: formValues});

  const toggleEdit = () => {
    setDisabled(!disabled);
  };

  const onSubmit = (formValue: ICustomerDashboardForm) => {
    if (formValue.password.length < 7) {
      setError('password length must be greater than 7 characters');
      return;
    }

    if (formValue.password !== formValue.confirmPassword) {
      setError('password and confirm password must match');
      return;
    }

    setError('');
    console.log('ready to make update details api call');
  };

  return (
    <>
      <div className='customer-dashboard'>
        <div className='customer-profile'>
          <div className='customer-profile-bio'>
            <div className='card bio-card'>
              <div className='flex'>
                <img src={avatar} alt='avatar' className='avatar'></img>
                <span>{user?.username ?? ''}</span>
                <span>Loyal Customer</span>
              </div>
            </div>
          </div>

          <div className='customer-profile-fields'>
            <div className='card'>
              <form onSubmit={handleSubmit(onSubmit)}>
                <div className='form-h'>
                  <div className='form-group-h'>
                    <label>Full Name</label>
                    <input type='text' {...register('name', { required: true, disabled })} />
                  </div>

                  <div className='form-group-h'>
                    <label>Email</label>
                    <input type='email' {...register('email', { required: true, disabled })} />
                  </div>

                  <div className='form-group-h'>
                    <label>Password</label>
                    <input type='password' placeholder='Enter new password' {...register('password', { required: true, disabled })} />
                  </div>

                  <div className='form-group-h'>
                    <label>Confirm Password</label>
                    <input type='password' placeholder='Confirm new password' {...register('confirmPassword', { required: true, disabled })} />
                  </div>

                  <div className='form-group-h'>
                    <button type='button' onClick={toggleEdit}>Toggle Edit</button>
                    <button type='submit' disabled={disabled}>Submit</button>
                  </div>

                  <div className='form-group-h'>
                    {error && <span>{error}</span>}
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>

        <div className='flights'>
          <div className='flex-row'>
            <span className='flights-title'>Upcoming Flights</span>
            <button type='submit' className='view_more_button'>View more</button>
          </div>
          <div className='flight-list'>
            {data.upcomingFlights.length > 0
              ? data.upcomingFlights.map((flight) => {
                  return <FlightCard key={flight.id} flight={flight}></FlightCard>
                })
              : <div>No Upcoming Flights</div>}
          </div>
        </div>

        <div className='flights'>
          <div className='flex-row'>
            <span className='flights-title'>Flights History</span>
            <button type='submit' className='view_more_button'>View more</button>
          </div>
          <div className='flight-list'>
            {data.upcomingFlights.length > 0
              ? data.flightsHistory.map((flight) => {
                  return <FlightCard key={flight.id} flight={flight}></FlightCard>
                })
              : <div>No Flights History</div>}
          </div>
        </div>
      </div>
    </>
  );
}

export default CustomerDashboard;