import {
  Badge,
  Box,
  Button,
  Tab,
  Tabs,
  Typography,
  styled,
} from "@mui/material";

export const FullWebChatOuter = styled(Box)({
  background: "#fff",
  margin: "3rem 0",
  // height: "85vh"
});
export const SellerDetailOuter = styled(Box)({
  background: "#fff",
  padding: "0 10px",
});
export const SelletHeaderInfo = styled(Box)({
  display: "flex",
  justifyContent: "space-between",
  "& .personadd": {
    color: "#d7282f",
  },
});

export const AvtartDetail = styled(Box)({
  display: "flex",
  gap: "5px",
  alignItems: "center",
});
export const SellerNameDetail = styled(Box)({
  display: "flex",
});
export const SellerName = styled(Typography)({
  fontWeight: "600",
  color: "#231F20",
  fontSize: "14px",
});
export const SCompanyDetail = styled(Typography)({
  color: "#858585",
  fontSize: "11px",
});
export const BusinessTypeDetail = styled(Box)({
  padding: "10px",
  "& img": {
    width: "100%",
  },
});
export const ScrollDiv = styled(Box)({
  height: "700px",
  overflowY: "auto",
});

export const AllInformationSection = styled(Box)({
  borderTop: "1px solid #ddd",
  padding: "15px 10px 0",
});
export const BasicInfoDetail = styled(Box)({});
export const BasicInfoDetailInner = styled(Box)({
  padding: "10px",
  margin: "0 0 10px",
});
export const CommonHeading = styled(Box)({
  background: "#FFF0F0",
  borderRadius: "50px",
  padding: "5px 10px",
  width: "max-content",
  "& .MuiTypography-root": {
    color: "#D7282F",
    fontSize: "14px",
    fontWeight: "600",
  },
});
export const InfoRowItem = styled(Box)({});
export const DetailHeading = styled("h4")({
  color: "#231F20",
  fontSize: "13px",
  fontWeight: "600",
  margin: 0,
});
export const DetailValue = styled(Typography)({
  color: "#231F20",
  fontSize: "12px",
});

// tab section start here
export const OuterBoxTab = styled(Box)({
  padding: "12px 0",
});
export const ChatTabs = styled(Tabs)({
  "& .MuiButtonBase-root.MuiTab-root.Mui-selected": {
    color: "#D7282F !important",
  },
  "& .MuiTabs-indicator": { backgroundColor: "#D7282F" },
});
export const ChatTabText = styled(Tab)({
  color: "#231f20",
  fontSize: "14px",
  fontWeight: "600",
  textTransform: "capitalize",
});
export const FlexBox = styled(Box)({
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  padding: "3px 0 6px",
});
export const HeadingBold = styled(Typography)({
  fontWeight: "600",
  fontSize: "14px",
  color: "#231f20",
});
export const NumberandIcon = styled(Typography)({
  fontWeight: "400",
  fontSize: "11px",
  color: "#231f20",
  display: "flex",
  alignItems: "center",
  "& svg": {
    fontSize: "16px",
  },
});
export const ImageBox = styled(Box)({
  margin: "8px 0 0 0",
  border: "1px solid #ECECEC",
  borderRadius: "8px",
  padding: "10px",
});
export const ImageStyle = styled("img")({
  width: "100%",
});

export const TabInfoBox = styled(Box)({
  padding: "14px 0 7px",
});
export const MyLinksRow = styled(Box)({
  border: "1px solid #EDEDED",
  borderRadius: "4px 0px 0px 4px",
  background: "#F6F6F6",
  margin: "0 0 10px",
});
export const MyLinksRowInn = styled(Box)({
  display: "flex",
  gap: "5px",
  background: "#F6F6F6",
  padding: "0 8px 0 1px",
});
export const LinkImgBox = styled(Box)({
  background: "#B8B8B8",
  width: "50px",
  height: "50px",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  borderRadius: "4px 0px 0px 4px",
  "& svg": {
    color: "#fff",
  },
});
export const LinkTextBox = styled(Box)({
  padding: "6px 0",
});
export const UrlOne = styled(Typography)({
  color: "#231F20",
  fontSize: "14px",
});
export const UrlSmall = styled(Typography)({
  color: "#8A8A8A",
  fontSize: "11px",
});
export const ViewMessageSection = styled(Box)({
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  padding: "5px",
  background: "#fff",
  "& .MuiTypography-root": {
    color: "#231F20",
    fontSize: "14px",
    cursor: "pointer",
    "&:hover": {
      color: "#d7282f",
    },
  },
  "& svg": {
    fontSize: "16px",
  },
});
export const FileItemRow = styled(Box)({
  border: "1px solid #EDEDED",
  margin: "0 0 10px",
});
export const FileImgBox = styled(Box)({
  width: "50px",
  height: "50px",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  borderRadius: "4px 0px 0px 4px",
  "& svg": {
    color: "#fff",
  },
});
export const FileTextBox = styled(Box)({
  padding: "6px 0",
  width: "100%",
});
export const FileNameHere = styled(Typography)({
  color: "#231F20",
  fontSize: "14px",
  fontWeight: 600,
});
export const FileBottomRow = styled(Box)({
  display: "flex",
  justifyContent: "space-between",
});
export const PageCountHere = styled(Box)({
  fontSize: "11px",
  display: "flex",
  "& .MuiTypography-root": {
    color: "#8A8A8A",
    fontSize: "11px",
    cursor: "pointer",
    borderRight: "1px solid #ddd",
    padding: "0 9px 0 7px",
  },
});
export const FileUploadTime = styled(Typography)({
  color: "#8A8A8A",
  fontSize: "11px",
});
export const ChatDrawerStyle = {
  "& .MuiDrawer-paper": {
    width: "400px",
    // height:"96vh",
    // height: "calc(95vh - 6.9rem)",
    overflow: "visible",
    padding: "10px 0 0 0",
    margin: "6.9rem 0 0",
  },
};

/****===== Start Empty CHAT PAGE left, Right section styling =====****/
export const EmptyUserList = styled(Box)({
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  height: "350px",
  "@media (max-width:767px)": {
    height: "70vh",
  },
});
export const RightSideChatSection = styled(Box)({
  height: "100%",
  position: "relative",
});

export const EmptyBigChatRoomRight = styled(Box)({
  height: "calc(94vh - 140px)",
});

export const OuterChatContainer = styled(Box)({
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  height: "100%",
});
export const BoldHeadings = styled(Typography)({
  fontSize: "16px",
  fontWeight: "700",
  color: "#393939",
  textAlign: "center",
  "@media (max-width:1600px)": {
    fontSize: "16px",
  },
});
export const SubText = styled(Typography)({
  fontSize: "16px",
  fontWeight: "400",
  color: "#404040",
  textAlign: "center",
  padding: "5px 0",
  "@media (max-width:1600px)": {
    fontSize: "14px",
  },
});
export const EmptySellerImage = styled(Box)({
  margin: "16px 0",
});
export const GroupAvailable = styled(Box)({
  textAlign: "center",
  // height: "340px",
  display: "flex",
  alignItems: "center",
  // gap: "15px",
  marginTop: "6px ",
  flexDirection: "column",
});
export const GroupNotAvailable = styled(Box)({
  textAlign: "center",
  height: "340px",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  flexDirection: "column",
  // gap: "15px",
  gap: "5px",
  "@media (max-width:767px)": {
    height: "70vh",
  },
});
export const EmptyBigChatRoomLeft = styled(Box)({
  // height: "calc(65vh - 120px)",
});
export const EmptySellerIcon = styled(Box)({
  "& .path1:before": {
    color: "#9A9A9A",
  },
  "& .path2:before": {
    color: "#9A9A9A",
  },
});
/****===== End Empty CHAT PAGE left, Right section styling =====****/

/***** Common Buttons *****/
export const CreateButton4All = styled(Button)({
  textTransform: "capitalize",
  color: "#d7282f",
  background: "#FEE9EB",
  fontSize: "13px",
  fontWeight: "700",
  borderRadius: "6px",
  marginTop: "5px",
  padding: "4px 10px",
});
export const ActionButton = styled(Box)({
  color: "#d7282f",
  display: "flex",
  justifyContent: "end",
  gap: "4px",
  margin: "6px 0 6px",
  "& button": {
    textTransform: "capitalize",
    fontSize: "12px",
    fontWeight: "600",
    borderRadius: "6px",
    color: "#515151",
  },
  "& .addbtnn": {
    border: "1px solid #838383",
    "&:hover": {
      background: "#d7282f",
      color: "#fff",
      border: "1px solid #d7282f",
    },
  },
});
export const SelectedMembersChip = styled(Box)({
  padding: "5px 0",
  "& .MuiChip-root": {
    margin: "1px",
  },
  "& .MuiChip-label": {
    fontSize: "12px",
  },
});
export const RecentChatBox = styled(Box)({
  background: "#fff",
  padding: "0 7px",
});
export const RecentChatRow = styled(Box)({
  display: "flex",
  gap: "10px",
  padding: "0 0 10px 0",
  "& .Mui-checked": {
    color: "#d7282fcc",
  },

  "& .MuiSvgIcon-root": {
    color: "#D7282F",
    fontSize: 16,
    display: "none",
  },
  "& .MuiButtonBase-root": {
    padding: 0,
  },
  "& .MuiDataGrid-columnSeparator": { display: "none" },
  ".MuiCheckbox-root": {
    position: "relative",
    "&:before": {
      content: '" "',
      display: "block",
      width: "14px",
      height: "14px",
      border: "1px solid #d2d2d2",
      borderRadius: "4px",
    },
    "&:after": {
      content: '" "',
      display: "inline-block",
      // transform: "rotate(45deg)",
      width: "4px",
      height: "8px",
      borderBottom: "1px solid #D7282F",
      borderRight: "1px solid #D7282F",
      position: "absolute",
      // top: "12px",
      opacity: "0",
      top: "47%",
      transform: "translateY(-50%) rotate(45deg)",
    },
    "&:hover": {
      "&:before": {
        borderColor: "#b1b0b0",
      },
    },
    "&.Mui-checked": {
      "&:after": {
        opacity: "1",
      },
      "&:before": {
        borderColor: "#D7282F",
      },
    },
  },
});

export const RecentChatBoxScroll = styled(Box)({
  minHeight: "330px",
  maxHeight: "330px",
  height: "330px",
  overflowY: "auto",
  "&::-webkit-scrollbar": { width: "5px" },
  "&::-webkit-scrollbar-track": { background: "#f1f1f1" },
  "&::-webkit-scrollbar-thumb": { background: "#D9D9D9", borderRadius: "10px" },
});
export const AvtarInfoInn = styled(Box)({
  display: "flex",
  gap: "10px",
  alignItems: "center",
});
export const AvtarName = styled(Typography)({
  color: "#484848",
  fontWeight: "600",
  fontSize: "13px",
});
export const AvtarCompanyName = styled(Typography)({
  color: "#a7a7a7",
  fontSize: "11px",
});
export const TopBar = styled(Box)({
  "& .MuiTypography-root": {
    color: "#a7a7a7",
    fontSize: "11px",
  },
});
export const GroupListCht = styled(Box)({
  "& .MuiListItem": {
    padding: 0,
  },
});
// LeaveChat css
export const ChatBox = styled(Box)({
  borderRadius: "6px",
  padding: "1px 10px 0px 10px",
  gap: "10px",
  color: "#fff",
});
export const ChatInFo = styled(Box)({
  fontSize: "16px",
  fontWeight: "600",
  color: "#231F20",
});
export const BorderBox = styled(Box)({
  width: "100%",
  border: "0px, 0px, 1px, 0px",
  padding: "3px 0px 5px 0px ",
  borderBottom: "1px solid #F0F0F0",
});
export const ProductChat = styled(Box)({
  display: "flex",
  alignContent: "center",
  padding: "10px 0 0 0 ",
});
export const Circul = styled(Box)({
  width: "40px",
  height: "40px",
  borderRadius: "50%",
  backgroundColor: "#EDEDED",
  boxShadow: " 0px 4px 4px 0px #00000040 inset",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
});
export const ImgIcon = styled(Box)({});
export const GroupChat = styled(Box)({
  padding: "0px 0 0 10px",
});
export const GroupChatName = styled(Typography)({
  fontSize: "14px",
  fontWeight: "600",
  color: "#231f20",
});
export const GroupChatID = styled(Typography)({
  fontSize: "10px",
  fontWeight: "400",
  color: " #858585",
  padding: "0px 0 0 0px",
});
export const GroupMember = styled(Box)({
  gap: "10px",
  border: " 1px solid #F5F5F5",
  opacity: "0px",
  borderRadius: "5px 5px 0px 0px",
  padding: "0px 0 0 0 ",
  marginTop: "10px",
});
export const Member = styled(Box)({
  height: "31px",
  gap: "10px",
  borderRadius: "5px 5px 0px 0px",
  opacity: "0px",
  padding: "6px",
  backgroundColor: "#F5F5F5",
});
export const GroupMember1 = styled(Box)({
  fontSize: "14px",
  fontWeight: "600",
  width: "124px",
  height: "19px",
  color: "#231F20",
});
export const CirculBox = styled(Box)({
  padding: "10px",
});
export const NameandImage = styled(Box)({
  display: "flex",
  justifyContent: "center",
  flexDirection: "column",
  alignItems: "center",
  position: "relative",
  gap: "6px",
});
export const Box1 = styled(Box)({
  width: "40px",
  height: "40px",
  borderRadius: "50%",
  backgroundColor: "#EDEDED",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
});
export const NameBox = styled(Box)({
  color: " #231F20",
  fontSize: "11px",
  fontWeight: "600",
  textAlign: "center",
});
export const NotificationsBox = styled(Box)({
  display: "flex",
  alignItems: "center",
  gap: "15px",
  margin: "12px 0 0 0",
  "@media screen and (max-width:767px)": {
    gap: "5px",
  },
});
export const MutBox = styled(Box)({
  padding: "10px",
  width: "50%",
  gap: "5px",
  borderRadius: "4px 0px 0px 0px",
  border: "1px solid #f2f2f2",
  background: " linear-gradient(98.68deg, #FAFAFA -4.87%, #FEF3F3 98.38%)",
});
export const PinBox = styled(Box)({
  padding: " 10px",
  width: "50%",
  borderRadius: "4px 0px 0px 0px",
  border: "1px solid #f2f2f2",
  background: "linear-gradient(97.95deg, #FAFAFA 1.49%, #EEFFFB 94.55%)",
});
export const NotificationTxtBox = styled(Box)({
  display: "flex",
  alignItems: "center",
});
export const MutText = styled(Box)({
  fontSize: "14px",
  fontWeight: "600",
  color: "#000000",
});

export const ButtonBox = styled(Box)({
  display: "flex",
  alignItems: "center",
  flexDirection: "column",
  gap: "10px",
  margin: "14px",
  "& button": {
    cursor: "pointer",
  },
});
export const Admin = styled(Box)({
  padding: "0px 8px 0px 8px",
  backgroundColor: "#FFEEEF",
  borderRadius: "2px",
  position: "absolute",
  top: "55%",
  "& .MuiTypography-root": {
    color: "#d7282f",
    fontSize: "9px",
    fontWeight: "400",
    lineHeight: "normal",
  },
});
export const LeaveButton = styled("button")({
  padding: "4px 16px",
  borderRadius: " 4px",
  border: "1px solid #d7282f",
  backgroundColor: "#d7282f",
  fontSize: "14px",
  fontWeight: "600",
  color: "#fff",
  "&:hover": {
    backgroundColor: "darkred",
    border: "1px solid #darkred",
  },
});

const StyledBadge = styled(Badge)(({ theme }) => ({
  "& .MuiBadge-badge": {
    backgroundColor: "#44b700",
    color: "#44b700",
    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
    "&::after": {
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      borderRadius: "50%",
      animation: "ripple 1.2s infinite ease-in-out",
      border: "1px solid currentColor",
      content: '""',
    },
  },
}));