import React from "react";
import { alpha, Grid, Typography, useTheme } from "@mui/material";
import CustomImageContainer from "../../../CustomImageContainer";
import { Stack } from "@mui/system";
import CustomRatings from "../../../search/CustomRatings";
import { t } from "i18next";
import { getImageUrl } from "utils/CustomFunctions";

const StoreAndDeliveryManCommon = ({
  data,
  imageUrl,
  image,
  fromDelivery,
  configData,
}) => {
  const theme = useTheme();
  const totalOrderText = t("Delivery Completed");
  const avgRating = Number(data?.avg_rating || 0);
  const ratingCount = Number(data?.rating_count || 0);
  const shouldShowRatings = avgRating > 0 && ratingCount > 0;
  return (
    <>
      <Grid item md={1.2} sm={4} xs={3}>
        {data && (
          <CustomImageContainer
            src={image}
            height="100px"
            smWidth="60px"
            smHeight="60px"
            borderRadius=".5rem"
            width="100px"
            objectfit="cover"
          />
        )}
      </Grid>
      <Grid item md={8} sm={8} xs={10.8} alignSelf="center">
        <Typography fontWeight="600" fontSize={{ xs: "14px", md: "20px" }}>
          {data && data?.name ? data?.name : data?.f_name}
        </Typography>
        {shouldShowRatings && (
          <Stack direction="row" alignItems="center">
            <CustomRatings
              readOnly="true"
              ratingValue={avgRating}
              color={theme.palette.warning.new}
            />
            <Typography
              fontSize={{ xs: "10px", md: "13.4px" }}
              fontWeight="700"
            >
              ({avgRating.toFixed(2)})
            </Typography>

            <Typography
              fontSize={{ xs: "10px", md: "13.4px" }}
              fontWeight="700"
              ml="9px"
              paddingLeft="9px"
              sx={{
                //textDecoration: "underLine",
                borderLeft: "2px solid",
                borderColor: (theme) => alpha(theme.palette.neutral[400], 0.4),
                color: (theme) => alpha(theme.palette.neutral[600], 0.9),
              }}
            >
              {ratingCount} {t("Reviews")}
            </Typography>
          </Stack>
        )}
        {fromDelivery !== "true" ? (
          <Typography fontSize={{ xs: "10px", md: "13.4px" }} mt="3px">
            {t("Address")} : {data && data?.address}
          </Typography>
        ) : (
          <Typography fontSize={{ xs: "10px", md: "13.4px" }}>
            {`${data?.order_count} ${totalOrderText}`}{" "}
          </Typography>
        )}
      </Grid>
    </>
  );
};

export default StoreAndDeliveryManCommon;
