import React from "react";
//import "react-big-calendar/lib/css/react-big-calendar.css";
import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
import { Button } from "antd";
import { SyncOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import ScheduleAppointmentModalContainer from "../schedule-appointment-modal/schedule-appointment-modal.container";

export default function ScheduleCalendarComponent({
  data,
  refetch,
  scheduleModalState
}) {
  const { t } = useTranslation();

  return (
    <div>
      <Button
        onClick={() => {
          refetch();
        }}
      >
        <SyncOutlined />
      </Button>

      <Button
        onClick={() => {
          scheduleModalState[1](true);
        }}
      >
        {t("appointments.actions.new")}
      </Button>

      <ScheduleAppointmentModalContainer
        scheduleModalState={scheduleModalState}
        jobId={null}
        refetch={refetch}
      />

      <ScheduleCalendarWrapperComponent
        data={data}
        defaultView="week"
        refetch={refetch}
      />
    </div>
  );
}
