// src/components/ScheduleBook.jsx
import React, { useState } from 'react';
import { LocalizationProvider, StaticDatePicker } from '@mui/lab';
import { TextField } from '@mui/material';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import 'tailwindcss/tailwind.css';
import useGoogleCalendar from './useBooking';

const ScheduleBook = ({ type }) => {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [eventDetails, setEventDetails] = useState({ summary: '', description: '', start: '', end: '' });
  const { login, createEvent } = useGoogleCalendar();

  const handleDateChange = (date) => {
    setSelectedDate(date);
    const start = new Date(date).toISOString();
    const end = new Date(date.getTime() + 60 * 60 * 1000).toISOString(); // 1-hour meeting
    setEventDetails({ ...eventDetails, start, end });
  };

  const handleCreateEvent = async () => {
    const event = {
      summary: eventDetails.summary,
      description: eventDetails.description,
      start: { dateTime: eventDetails.start, timeZone: 'America/Los_Angeles' },
      end: { dateTime: eventDetails.end, timeZone: 'America/Los_Angeles' },
      attendees: [{ email: 'user@example.com' }],
      conferenceData: {
        createRequest: {
          requestId: '7qxalsvy0e',
          conferenceSolutionKey: { type: 'hangoutsMeet' },
        },
      },
    };

    const createdEvent = await createEvent(event);
    console.log('Created Event:', createdEvent);
  };

  return (
    <div className="p-4 bg-white shadow-lg rounded-lg">
      <LocalizationProvider dateAdapter={AdapterDateFns}>
        <StaticDatePicker
          displayStaticWrapperAs="desktop"
          openTo="day"
          value={selectedDate}
          onChange={handleDateChange}
          renderInput={(params) => <TextField {...params} />}
        />
      </LocalizationProvider>
      <div className="mt-4">
        <input
          type="text"
          placeholder="Event Summary"
          className="w-full p-2 mb-2 border border-gray-300 rounded"
          onChange={(e) => setEventDetails({ ...eventDetails, summary: e.target.value })}
        />
        <textarea
          placeholder="Event Description"
          className="w-full p-2 mb-2 border border-gray-300 rounded"
          onChange={(e) => setEventDetails({ ...eventDetails, description: e.target.value })}
        />
        <button
          onClick={login}
          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
        >
          {type === 'book' ? 'Login to Google' : 'Login to Google'}
        </button>
        <button
          onClick={handleCreateEvent}
          className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 mt-2"
        >
          {type === 'book' ? 'Book Appointment' : 'Add to My Calendar'}
        </button>
      </div>
    </div>
  );
};

export default ScheduleBook;