Untitled

import React, { useEffect, useState } from 'react';

import Tabs from 'react-bootstrap/Tabs'
import Tab from 'react-bootstrap/Tab'
import Modal from 'react-bootstrap/Modal'
import Basic from './Basic';
import DoctorCitation from '../citations/DoctorCitation';
import Schedule from './Schedule';
import TimeLocker from '../citations/TimeLocker';
import ArchivedCitations from './ArchivedCitations';
import Planner from './Planner';

import 'bootstrap/dist/css/bootstrap.min.css';
import '../../assets/stylesheets/homepage.css';
import '../../assets/stylesheets/calendar.css';
import { NewReminderHelper } from "../../components/reminders/NewReminderHelper";
import { DoctorCitationV2 } from '../citations/DoctorCitationV2';
import { useSelector } from "react-redux";
import Current from './Current';
import ScheduleV2 from './ScheduleV2';

const Calendar = () => {

  const state = useSelector(state => state);

  useEffect(() => {
  }, [])

  const [show, setShow] = useState(false);
  const [timeLocker, setTimeLocker] = useState(false);
  const [active, setActive] = useState('');

  const handleClose = () => {
    setShow(false)
    setSchedule([])
  };
  const handleShow = () => setShow(true);

  const handleShowTimeLocker = () => setTimeLocker(true);
  const handleCloseTimeLocker = () => setTimeLocker(false);
  const [assistant, setAssistant] = useState(true);
  const [schedule, setSchedule] = useState([]);

  const confirmEvent = () => {
    console.log('created!')
  }

  const handleLoad = (e) => {
    console.log(e)
  }


  return (
    <>
      <NewReminderHelper />

      <div className="frame">
        <h4 className="main-title mt-2">Calendar</h4>

        <Tabs
          defaultActiveKey="home"
          id="uncontrolled-tab-example"
          className="mb-3"
          onSelect={(k) => handleLoad(k)}
        >

          <Tab
            eventKey="home"
            title="Current"
          >
            <button className="blue-btn" onClick={handleShow}>
              New Appointment
            </button>

            <div className="calendar-frame-new">
              <Current />
              {/* <Basic /> */}
            </div>
          </Tab>

          <Tab eventKey="other" title="Archived">

            <div className="calendar-frame-new">
              <ArchivedCitations />
            </div>
          </Tab>

          {state.auth['doc_id'] !== null ?
            <Tab eventKey="planner" title="Planner">

              <div className="calendar-frame-new">
                <Planner />
              </div>
            </Tab>
            : <></>}

          <Tab eventKey="profile" title="Settings">
            <button className="blue-btn mb-2" onClick={handleShowTimeLocker}>
              New Spot Lock
            </button>
            <div className="calendar-frame-new">
              <Schedule />
              {/* <ScheduleV2 /> */}
            </div>
          </Tab>

        </Tabs>

      </div>

      <Modal
        size={assistant && schedule.length > 0 ? "lg" : <></>}
        show={show}
        onHide={handleClose}
        aria-labelledby="contained-modal-title-vcenter"
        centered>

        <Modal.Body style={{ background: '#F4F5FA' }}>
          {/* <DoctorCitation confirmEvent={confirmEvent}/> */}
          <DoctorCitationV2 schedule={schedule} setSchedule={setSchedule} assistant={assistant} setAssistant={setAssistant} handleClose={handleClose} />
        </Modal.Body>
      </Modal>

      <Modal
        show={timeLocker}
        onHide={handleCloseTimeLocker}
        aria-labelledby="contained-modal-title-vcenter"
        centered>
        <Modal.Header style={{ background: '#F4F5FA' }}>
          <Modal.Title >
            Time Locker
          </Modal.Title>
        </Modal.Header>
        <Modal.Body style={{ background: '#F4F5FA' }}>
          <TimeLocker />
        </Modal.Body>
      </Modal>

    </>

  )
}

export default Calendar;