import { styled } from "@mui/system";
import {
  Autocomplete,
  Box,
  Checkbox,
  Grid,
  InputLabel,
  TextField,
  Typography,
} from "@mui/material";
import { fontSizeMedium, fontSizeSmall } from "../../constants/Misc.ts";

export const IssueContainer = styled(Box)(({ theme }) => ({
  position: "relative",
  display: "flex",
  padding: "15px",
  flexDirection: "row",
  gap: "20px",
  flexWrap: "wrap",
  justifyContent: "flex-start",
  width: "100%",
}));

export const StoresRow = styled(Grid)(({ theme }) => ({
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "flex-start",
  gap: "15px",
  width: "auto",
  position: "relative",
  "@media (max-width: 450px)": {
    width: "100%",
  },
}));

export const IssueCard = styled(Grid)(({ theme }) => ({
  position: "relative",
  display: "flex",
  flexDirection: "column",
  height: "320px",
  width: "300px",
  backgroundColor: theme.palette.background.paper,
  borderRadius: "8px",
  padding: "10px 15px",
  gap: "20px",
  cursor: "pointer",
  border:
    theme.palette.mode === "dark"
      ? "none"
      : `1px solid ${theme.palette.primary.light}`,
  boxShadow:
    theme.palette.mode === "dark"
      ? "0px 4px 5px 0px hsla(0,0%,0%,0.14),  0px 1px 10px 0px hsla(0,0%,0%,0.12),  0px 2px 4px -1px hsla(0,0%,0%,0.2)"
      : "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
  transition: "all 0.3s ease-in-out",
  "&:hover": {
    boxShadow:
      theme.palette.mode === "dark"
        ? "0px 8px 10px 1px hsla(0,0%,0%,0.14), 0px 3px 14px 2px hsla(0,0%,0%,0.12), 0px 5px 5px -3px hsla(0,0%,0%,0.2)"
        : "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;",
  },
}));

export const StoreCardInfo = styled(Grid)(({ theme }) => ({
  display: "flex",
  flexDirection: "column",
  gap: "10px",
  padding: "5px",
  marginTop: "15px",
}));

export const VideoImageContainer = styled(Grid)(({ theme }) => ({}));

export const VideoCardImage = styled("img")(({ theme }) => ({
  maxWidth: "300px",
  minWidth: "150px",
  borderRadius: "5px",
  height: "150px",
  objectFit: "fill",
  width: "266px",
}));

const DoubleLine = styled(Typography)`
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
`;

export const VideoCardTitle = styled(DoubleLine)(({ theme }) => ({
  fontFamily: "Cairo",
  fontSize: fontSizeMedium,
  letterSpacing: "0.4px",
  color: theme.palette.text.primary,
  userSelect: "none",
}));
export const VideoCardName = styled(Typography)(({ theme }) => ({
  fontFamily: "Cairo",
  fontSize: fontSizeSmall,
  letterSpacing: "0.4px",
  color: theme.palette.text.primary,
  userSelect: "none",
  overflow: "hidden",
  whiteSpace: "nowrap",
  textOverflow: "ellipsis",
  width: "100%",
}));
export const VideoUploadDate = styled(Typography)(({ theme }) => ({
  fontFamily: "Cairo",
  display: "span",
  fontSize: fontSizeSmall,
  letterSpacing: "0.4px",
  color: theme.palette.text.primary,
  userSelect: "none",
}));
export const BottomParent = styled(Box)(({ theme }) => ({
  display: "flex",
  justifyItems: "flex-end",
  alignItems: "flex-end",
  flexDirection: "column",
}));
export const VideoCardDescription = styled(Typography)(({ theme }) => ({
  fontFamily: "Karla",
  fontSize: "20px",
  letterSpacing: "0px",
  color: theme.palette.text.primary,
  userSelect: "none",
}));

export const StoreCardOwner = styled(Typography)(({ theme }) => ({
  fontFamily: "Livvic",
  color: theme.palette.text.primary,
  fontSize: "17px",
  position: "absolute",
  bottom: "5px",
  right: "10px",
  userSelect: "none",
}));

export const StoreCardYouOwn = styled(Box)(({ theme }) => ({
  position: "absolute",
  top: "5px",
  right: "10px",
  display: "flex",
  alignItems: "center",
  gap: "5px",
  fontFamily: "Livvic",
  fontSize: "15px",
  color: theme.palette.text.primary,
}));

export const MyStoresRow = styled(Grid)(({ theme }) => ({
  display: "flex",
  flexDirection: "row",
  justifyContent: "flex-end",
  padding: "5px",
  width: "100%",
}));

export const NameAndDateContainer = styled(Box)(({ theme }) => ({
  display: "grid",
  gridTemplateRows: "1fr 1fr",
  justifyContent: "end",
  alignContent: "center",
  gap: "10px",
  marginBottom: "10px",
}));

export const MyStoresCard = styled(Box)(({ theme }) => ({
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  width: "auto",
  borderRadius: "4px",
  backgroundColor: theme.palette.background.paper,
  padding: "5px 10px",
  fontFamily: "Raleway",
  fontSize: "18px",
  color: theme.palette.text.primary,
}));

export const MyStoresCheckbox = styled(Checkbox)(({ theme }) => ({
  color: "#c0d4ff",
  "&.Mui-checked": {
    color: "#6596ff",
  },
}));

export const FiltersCol = styled(Grid)(({ theme }) => ({
  display: "flex",
  flexDirection: "column",
  height: "100%",
  padding: "20px 15px",
  backgroundColor: theme.palette.background.default,
  borderTop: `1px solid ${theme.palette.background.paper}`,
  borderRight: `1px solid ${theme.palette.background.paper}`,
}));

export const FiltersContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  flexDirection: "column",
  justifyContent: "space-between",
}));

export const FiltersRow = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  width: "100%",
  padding: "0 15px",
  fontSize: "16px",
  userSelect: "none",
}));

export const FiltersTitle = styled(Typography)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  gap: "5px",
  margin: "20px 0",
  fontFamily: "Raleway",
  fontSize: "17px",
  color: theme.palette.text.primary,
  userSelect: "none",
}));

export const FiltersCheckbox = styled(Checkbox)(({ theme }) => ({
  color: "#c0d4ff",
  "&.Mui-checked": {
    color: "#6596ff",
  },
}));

export const FilterSelect = styled(Autocomplete)(({ theme }) => ({
  "& #categories-select": {
    padding: "7px",
  },
  "& .MuiSelect-placeholder": {
    fontFamily: "Raleway",
    fontSize: "17px",
    color: theme.palette.text.primary,
    userSelect: "none",
  },
  "& MuiFormLabel-root": {
    fontFamily: "Raleway",
    fontSize: "17px",
    color: theme.palette.text.primary,
    userSelect: "none",
  },
}));

export const FilterSelectMenuItems = styled(TextField)(({ theme }) => ({
  fontFamily: "Raleway",
  fontSize: "17px",
  color: theme.palette.text.primary,
  userSelect: "none",
}));

export const FiltersSubContainer = styled(Box)(({ theme }) => ({
  display: "flex",
  alignItems: "center",
  flexDirection: "column",
  gap: "5px",
}));

export const FilterDropdownLabel = styled(InputLabel)(({ theme }) => ({
  fontFamily: "Raleway",
  fontSize: "16px",
  color: theme.palette.text.primary,
}));

export const IconsBox = styled(Box)({
  display: "flex",
  gap: "3px",
  position: "absolute",
  top: "-20px",
  right: "-5px",
  transition: "all 0.3s ease-in-out",
});

export const BlockIconContainer = styled(Box)({
  display: "flex",
  boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;",
  backgroundColor: "#fbfbfb",
  color: "#c25252",
  padding: "2px",
  borderRadius: "3px",
  transition: "all 0.3s ease-in-out",
  fontSize: "18px",
  "&:hover": {
    cursor: "pointer",
    transform: "scale(1.1)",
  },
});
