"use client";

import React, { useContext } from "react";
import { BottomSheet } from "react-spring-bottom-sheet";
import Input from "plugins/Input/page";
import AppContext from "@ctx/AppContext";

const BottomSheetCreateShifts = (props) => {
  const CTX = useContext(AppContext);

  return (
    <BottomSheet
      open={CTX.state.BottomSheetCreateShiftsOpen}
      onDismiss={() => CTX.setBottomSheetCreateShiftsOpen(false)}
    >
      <div className="text-center py-2 bg-primary-300  ">
        <p className="mb-0 text-white relative top-[-5px]">
          افزودن شیفت کاری جدید
        </p>
      </div>

      <div className="bg-body-100 p-4 ">
        <div className="">
          <Input
            lable="نام شیفت مورد نظر "
            id="ShiftName-id"
            name="ShiftName"
            type={"text"}
          />
        </div>

        <div className="">
          <Input
            lable="ساعت شروع شیفت"
            id="ُStartShift-id"
            name="StartShift"
            type={"text"}
          />
        </div>

        <div className="">
          <Input
            lable="ساعت پایان شیفت"
            id="EndShift-id"
            name="ُEndShift"
            type={"text"}
          />
        </div>

        <div className="">
          <Input
            lable="انتخاب روزهای این شیفت در هفته"
            id="DaysShift-id"
            name="ُDaysShift"
            type={"text"}
          />

          <div className="flex flex-wrap mt-2">
            <div className="bg-gray-300 rounded-full p-1  m-2 ">
              <div className="flex rtl">
                <div className="bg-gray-200 w-[30px] h-[30px] rounded-full p-2  ">
                  <svg
                    width="12"
                    height="12"
                    viewBox="0 0 9 9"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="mx-auto "
                  >
                    <path
                      d="M5.54023 4.42081L8.33877 1.62148C8.41438 1.54845 8.4747 1.46109 8.51618 1.36451C8.55768 1.26792 8.57951 1.16404 8.58043 1.05892C8.58134 0.953805 8.56131 0.849559 8.52151 0.752266C8.4817 0.654973 8.42292 0.566582 8.34858 0.49225C8.27425 0.417918 8.18586 0.359134 8.08857 0.319329C7.99128 0.279523 7.88703 0.259492 7.78191 0.260406C7.6768 0.261319 7.57291 0.283158 7.47633 0.324649C7.37974 0.366139 7.29238 0.42645 7.21936 0.502063L4.42002 3.3006L1.62148 0.502063C1.54845 0.42645 1.46109 0.366139 1.36451 0.324649C1.26792 0.283158 1.16404 0.261319 1.05892 0.260406C0.953805 0.259492 0.849559 0.279523 0.752266 0.319329C0.654973 0.359134 0.566582 0.417918 0.49225 0.49225C0.417918 0.566582 0.359134 0.654973 0.319329 0.752266C0.279523 0.849559 0.259492 0.953805 0.260406 1.05892C0.261319 1.16404 0.283158 1.26792 0.324649 1.36451C0.366139 1.46109 0.42645 1.54845 0.502063 1.62148L3.3006 4.42002L0.502063 7.21936C0.42645 7.29238 0.366139 7.37974 0.324649 7.47633C0.283158 7.57291 0.261319 7.6768 0.260406 7.78191C0.259492 7.88703 0.279523 7.99128 0.319329 8.08857C0.359134 8.18586 0.417918 8.27425 0.49225 8.34858C0.566582 8.42292 0.654973 8.4817 0.752266 8.52151C0.849559 8.56131 0.953805 8.58134 1.05892 8.58043C1.16404 8.57951 1.26792 8.55768 1.36451 8.51618C1.46109 8.4747 1.54845 8.41438 1.62148 8.33877L4.42002 5.54023L7.21936 8.33877C7.29238 8.41438 7.37974 8.4747 7.47633 8.51618C7.57291 8.55768 7.6768 8.57951 7.78191 8.58043C7.88703 8.58134 7.99128 8.56131 8.08857 8.52151C8.18586 8.4817 8.27425 8.42292 8.34858 8.34858C8.42292 8.27425 8.4817 8.18586 8.52151 8.08857C8.56131 7.99128 8.58134 7.88703 8.58043 7.78191C8.57951 7.6768 8.55768 7.57291 8.51618 7.47633C8.4747 7.37974 8.41438 7.29238 8.33877 7.21936L5.54023 4.42081Z"
                      fill="#666666"
                    />
                  </svg>
                </div>
                <p className="mb-0 px-4 mt-1">شنبه</p>
              </div>
            </div>
          </div>
        </div>

        <div className="">
          <Input
            lable="توضیحات شیفت"
            id="EndShift-id"
            name="ُEndShift"
            type={"text"}
            textarea={true}
          />
        </div>

        <div className="flex rtl mt-10">
          <div className=" w-full">
            <button className="btn btn-info w-full rounded-xl mt-2 flex rtl justify-between p-2">
              <div className="w-[40px] h-[40px] rounded-xl bg-info-200">
                <svg
                  width="20"
                  height="20"
                  viewBox="0 0 12 10"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  className="mx-auto mt-2"
                >
                  <path
                    d="M4.243 9.314L0 5.07L1.414 3.656L4.243 6.484L9.899 0.826996L11.314 2.242L4.243 9.312V9.314Z"
                    fill="#FFFBE6"
                  />
                </svg>
              </div>
              <span className="text-center mt-2">افزودن شیفت</span>
              <div className="w-[40px] h-[40px] rounded-xl "></div>
            </button>
          </div>

          {/* <div className=" mx-7 mt-4">
              <p className="mb-0 text-info-200  "> بستن </p>
            </div> */}
        </div>
      </div>
    </BottomSheet>
  );
};

export default BottomSheetCreateShifts;