import { Button } from "antd";
import { useTranslation } from "react-i18next";
import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
import ProText from "components/ProText";
import ProTitle from "components/ProTitle";
import { useAppSelector } from "redux/hooks";

interface OpeningTimesBottomSheetProps {
  isOpen: boolean;
  onClose: () => void;
}

const textStyle: React.CSSProperties = {
  fontWeight: 400,
  fontStyle: "Regular",
  fontSize: 14,
  lineHeight: "140%",
  letterSpacing: "0%",
  marginBottom: 4,
};

export function OpeningTimesBottomSheet({
  isOpen,
  onClose,
}: OpeningTimesBottomSheetProps) {
  const { t } = useTranslation();
  const { isRTL } = useAppSelector((state) => state.locale);
  const { restaurant } = useAppSelector((state) => state.order);

  const days = [
    "sunday",
    "monday",
    "tuesday",
    "wednesday",
    "thursday",
    "friday",
    "saturday",
  ];
  const todayIndex = new Date().getDay();
  const todayDay = days[todayIndex];

  return (
    <ProBottomSheet
      isOpen={isOpen}
      onClose={onClose}
      title={t("menu.openingTimes")}
      showCloseButton={false}
      initialSnap={1}
      height={445}
      snapPoints={[445]}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          padding: 20,
        }}
      >
        <ProTitle level={5}>{t("menu.address")}</ProTitle>
        <ProText type="secondary">
          {isRTL ? restaurant?.addressAR : restaurant?.address}
        </ProText>

        <ProTitle level={5}>{t("menu.openingTimes")}</ProTitle>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "sunday" ? 700 : 400,
            }}
          >
            sunday
          </ProText>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "sunday" ? 700 : 400,
            }}
          >
            10:00 AM to 10:00 PM
          </ProText>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "monday" ? 700 : 400,
            }}
          >
            monday
          </ProText>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "monday" ? 700 : 400,
            }}
          >
            10:00 AM to 10:00 PM
          </ProText>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between"}}>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "tuesday" ? 700 : 400,
            }}
          >
            tuesday
          </ProText>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "tuesday" ? 700 : 400,
            }}
          >
            10:00 AM to 10:00 PM
          </ProText>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "wednesday" ? 700 : 400,
            }}
          >
            wednesday
          </ProText>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "wednesday" ? 700 : 400,
            }}
          >
            10:00 AM to 10:00 PM
          </ProText>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "thursday" ? 700 : 400,
            }}
          >
            thursday
          </ProText>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "thursday" ? 700 : 400,
            }}
          >
            10:00 AM to 10:00 PM
          </ProText>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "friday" ? 700 : 400,
            }}
          >
            friday
          </ProText>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "friday" ? 700 : 400,
            }}
          >
            10:00 AM to 10:00 PM
          </ProText>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "saturday" ? 700 : 400,
            }}
          >
            saturday
          </ProText>
          <ProText
            type="secondary"
            style={{
              ...textStyle,
              fontWeight: todayDay === "saturday" ? 700 : 400,
            }}
          >
            10:00 AM to 10:00 PM
          </ProText>
        </div>
      </div>
      <Button
        type="primary"
        style={{ width: "100%", height: 48 }}
        onClick={onClose}
      >
        {t("menu.close")}
      </Button>
    </ProBottomSheet>
  );
}
