import {
  Autocomplete,
  Box,
  TextField,
  Paper,
  Typography,
  Tab,
  Tabs,
  Button,
  Stack,
} from "@mui/material";
import { Edit, useAutocomplete } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { Controller, FieldValues } from "react-hook-form";
import { Link, useParams } from "react-router";
import React, { useState, useEffect } from "react";
import { CreateSightArticle, LinkedItemsContents } from "@components";
import { ArticleItem, articleFields } from "./types";
import { axiosInstance, TOKEN_KEY } from "@providers";
import { observer } from "mobx-react-lite";

import {
  Languages,
  languageStore,
  articleStore,
  META_LANGUAGE,
  EVERY_LANGUAGE,
} from "@stores";
import axios from "axios";
import { LanguageSelector, MediaData, MediaView } from "@ui";
import { ArticleEditModal } from "../../components/modals/ArticleEditModal/index";
import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`,
  };
}

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

function CustomTabPanel(props: TabPanelProps) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
    </div>
  );
}

export const SightEdit = observer(() => {
  const { id: sightId } = useParams<{ id: string }>();
  const { language, setLanguageAction } = languageStore;
  const [previewSelected, setPreviewSelected] = useState(true);
  const { setArticleModalOpenAction, setArticleIdAction } = articleStore;
  const [sightData, setSightData] = useState({
    name: EVERY_LANGUAGE(""),
    address: EVERY_LANGUAGE(""),
  });
  const [coordinates, setCoordinates] = useState("");

  const {
    saveButtonProps,
    register,
    refineCore: { onFinish },
    control,
    watch,
    getValues,
    setValue,
    handleSubmit,
    formState: { errors },
  } = useForm({
    refineCoreProps: META_LANGUAGE(language),
    warnWhenUnsavedChanges: false,
  });
  const name = watch("name");

  const getMedia = async (id?: string | number) => {
    if (!id) return;
    try {
      const response = await axios.get(
        `${import.meta.env.VITE_KRBL_API}/article/${id}/media`,
        {
          headers: {
            Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
            "Accept-Language": language,
          },
        }
      );
      return response.data[0];
    } catch {
      return;
    }
  };

  useEffect(() => {
    setLanguageAction("ru");
  }, []);

  const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
    resource: "city",
    onSearch: (value) => [
      {
        field: "name",
        operator: "contains",
        value,
      },
    ],
    ...META_LANGUAGE("ru"),
  });
  const [mediaFile, setMediaFile] = useState<MediaData>();
  const [leftArticleData, setLeftArticleData] = useState<{
    heading: string;
    body: string;
    media: MediaData;
  }>();

  const [tabValue, setTabValue] = useState(0);

  const { autocompleteProps: mediaAutocompleteProps } = useAutocomplete({
    resource: "media",
    onSearch: (value) => [
      {
        field: "media_name",
        operator: "contains",
        value,
      },
    ],
  });

  const { autocompleteProps: articleAutocompleteProps } = useAutocomplete({
    resource: "article",

    onSearch: (value) => [
      {
        field: "heading",
        operator: "contains",
        value,
      },
      {
        field: "media_type",
        operator: "contains",
        value,
      },
    ],
  });

  useEffect(() => {
    if (sightData.name[language]) setValue("name", sightData.name[language]);
    if (sightData.address[language])
      setValue("address", sightData.address[language]);
  }, [language, sightData, setValue]);

  // Состояния для предпросмотра

  const [creatingArticleHeading, setCreatingArticleHeading] =
    useState<string>("");
  const [creatingArticleBody, setCreatingArticleBody] = useState<string>("");

  const [coordinatesPreview, setCoordinatesPreview] = useState("");
  const [selectedArticleIndex, setSelectedArticleIndex] = useState(-1);
  const [previewMediaFile, setPreviewMediaFile] = useState<MediaData>();
  const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
  const [watermarkLUPreview, setWatermarkLUPreview] = useState<string | null>(
    null
  );
  const [watermarkRDPreview, setWatermarkRDPreview] = useState<string | null>(
    null
  );

  const [linkedArticles, setLinkedArticles] = useState<ArticleItem[]>([]);
  // Следим за изменениями во всех полях
  const selectedArticle = linkedArticles[selectedArticleIndex];

  const previewMediaId = watch("preview_media");
  const leftArticleId = watch("left_article");

  useEffect(() => {
    if (previewMediaId) {
      const selectedMedia = mediaAutocompleteProps.options.find(
        (option) => option.id === previewMediaId
      );
      console.log("Triggering", previewMediaId);
      if (!selectedMedia) return;
      setPreviewMediaFile(selectedMedia);
    }
  }, [previewMediaId, mediaAutocompleteProps.options]);

  // useEffect(() => {
  //   const selectedWatermarkLU = mediaAutocompleteProps.options.find(
  //     (option) => option.id === watermarkLUContent
  //   );
  //   setWatermarkLUPreview(
  //     selectedWatermarkLU
  //       ? `${import.meta.env.VITE_KRBL_MEDIA}${
  //           selectedWatermarkLU.id
  //         }/download?token=${localStorage.getItem(TOKEN_KEY)}`
  //       : null
  //   );
  // }, [watermarkLUContent, ]);

  const addressContent = watch("address");
  const latitudeContent = watch("latitude");
  const longitudeContent = watch("longitude");
  const thumbnailContent = watch("thumbnail");
  const watermarkLUContent = watch("watermark_lu");
  const watermarkRDContent = watch("watermark_rd");

  useEffect(() => {
    if (latitudeContent && longitudeContent) {
      setCoordinates(`${latitudeContent} ${longitudeContent}`);
    }
  }, [latitudeContent, longitudeContent]);

  const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCoordinates(e.target.value);
    if (e.target.value) {
      const [lat, lon] = e.target.value.split(" ").map((s) => s.trim());
      setCoordinatesPreview(`${lat ?? "0"}, ${lon ?? "0"}`);
      setValue("latitude", lat ?? "");
      setValue("longitude", lon ?? "");
    } else {
      setCoordinatesPreview("");
      setValue("latitude", "");
      setValue("longitude", "");
    }
  };

  useEffect(() => {
    if (linkedArticles[selectedArticleIndex]?.id) {
      getMedia(linkedArticles[selectedArticleIndex].id).then((media) => {
        setMediaFile(media);
      });
    }
  }, [selectedArticleIndex, linkedArticles]);

  useEffect(() => {
    const selectedThumbnail = mediaAutocompleteProps.options.find(
      (option) => option.id === thumbnailContent
    );
    setThumbnailPreview(
      selectedThumbnail
        ? `${import.meta.env.VITE_KRBL_MEDIA}${
            selectedThumbnail.id
          }/download?token=${localStorage.getItem(TOKEN_KEY)}`
        : null
    );
  }, [thumbnailContent, mediaAutocompleteProps.options]);

  useEffect(() => {
    const selectedWatermarkLU = mediaAutocompleteProps.options.find(
      (option) => option.id === watermarkLUContent
    );
    setWatermarkLUPreview(
      selectedWatermarkLU
        ? `${import.meta.env.VITE_KRBL_MEDIA}${
            selectedWatermarkLU.id
          }/download?token=${localStorage.getItem(TOKEN_KEY)}`
        : null
    );
  }, [watermarkLUContent, mediaAutocompleteProps.options]);

  useEffect(() => {
    const selectedWatermarkRD = mediaAutocompleteProps.options.find(
      (option) => option.id === watermarkRDContent
    );
    setWatermarkRDPreview(
      selectedWatermarkRD
        ? `${import.meta.env.VITE_KRBL_MEDIA}${
            selectedWatermarkRD.id
          }/download?token=${localStorage.getItem(TOKEN_KEY)}`
        : null
    );
  }, [watermarkRDContent, mediaAutocompleteProps.options]);

  useEffect(() => {
    const selectedLeftArticle = articleAutocompleteProps.options.find(
      (option) => option.id === leftArticleId
    );
    if (!selectedLeftArticle?.id) return;
    getMedia(selectedLeftArticle.id).then((media) => {
      setLeftArticleData({
        heading: selectedLeftArticle.heading,
        body: selectedLeftArticle.body,
        media,
      });
    });
  }, [leftArticleId, articleAutocompleteProps.loading]);

  function updateTranslations(update: boolean = true) {
    const newSightData = {
      ...sightData,
      name: {
        ...sightData.name,
        [language]: watch("name") ?? "",
      },
      address: {
        ...sightData.address,
        [language]: watch("address") ?? "",
      },
    };
    if (update) setSightData(newSightData);
    return newSightData;
  }

  const handleLanguageChange = (lang: Languages) => {
    updateTranslations();
    setLanguageAction(lang);
  };

  const handleFormSubmit = handleSubmit(async (values: FieldValues) => {
    const newTranslations = updateTranslations(false);
    console.log(newTranslations);
    await onFinish({
      ...values,
      translations: newTranslations,
    });
  });

  useEffect(() => {
    return () => {
      setLanguageAction("ru");
    };
  }, [setLanguageAction]);

  const [articleAdditionMode, setArticleAdditionMode] = useState<
    "attaching" | "creating"
  >("attaching");
  const [selectedItemId, setSelectedItemId] = useState<string>();
  const [updatedLinkedArticles, setUpdatedLinkedArticles] = useState<
    ArticleItem[]
  >([]);

  const linkItem = () => {
    if (!selectedItemId) return;
    const requestData = {
      article_id: selectedItemId,
      page_num: linkedArticles.length + 1,
    };

    axiosInstance
      .post(
        `${import.meta.env.VITE_KRBL_API}/sight/${sightId}/article`,
        requestData
      )
      .then(() => {
        axiosInstance
          .get(`${import.meta.env.VITE_KRBL_API}/sight/${sightId}/article`)
          .then((response) => {
            setUpdatedLinkedArticles(response?.data || []);
            setSelectedItemId(undefined);
          });
      })
      .catch((error) => {
        console.error("Error linking item:", error);
      });
  };

  return (
    <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs
          value={tabValue}
          onChange={(_, newValue) => setTabValue(newValue)}
          aria-label="basic tabs example"
        >
          <Tab label="Левый виджет" {...a11yProps(1)} />
          <Tab label="Правый виджет" {...a11yProps(2)} />
          <Tab label="Основная информация" {...a11yProps(3)} />
        </Tabs>
      </Box>

      <CustomTabPanel value={tabValue} index={0}>
        <Edit
          saveButtonProps={{
            ...saveButtonProps,
            onClick: handleFormSubmit,
          }}
          footerButtonProps={{
            sx: {
              bottom: 0,
              left: 0,
            },
          }}
        >
          <Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
            <Box
              sx={{ display: "flex", gap: 2, position: "relative", flex: 1 }}
            >
              <Box
                sx={{
                  display: "flex",
                  flexDirection: "column",
                  flex: 1,
                  gap: 10,
                  justifyContent: "space-between",
                }}
              >
                <LanguageSelector action={handleLanguageChange} />

                {/* Форма редактирования */}
                <Box
                  component="form"
                  sx={{ flex: 1, display: "flex", flexDirection: "column" }}
                  autoComplete="off"
                >
                  <TextField
                    {...register("name", {
                      //required: "Это поле является обязательным",
                    })}
                    error={!!(errors as any)?.name}
                    helperText={(errors as any)?.name?.message}
                    margin="normal"
                    fullWidth
                    slotProps={{ inputLabel: { shrink: true } }}
                    type="text"
                    label={"Название"}
                    name="name"
                  />
                  <TextField
                    {...register("address", {
                      //required: "Это поле является обязательным",
                    })}
                    error={!!(errors as any)?.address}
                    helperText={(errors as any)?.address?.message}
                    margin="normal"
                    fullWidth
                    slotProps={{ inputLabel: { shrink: true } }}
                    type="text"
                    label={"Адрес"}
                    name="address"
                  />

                  <Box sx={{ display: "none" }}>
                    <Controller
                      control={control}
                      name="preview_media"
                      defaultValue={null}
                      render={({ field }) => (
                        <Autocomplete
                          {...mediaAutocompleteProps}
                          value={
                            mediaAutocompleteProps.options.find(
                              (option) => option.id === field.value
                            ) || null
                          }
                          onChange={(_, value) => {
                            field.onChange(value?.id || "");
                          }}
                          getOptionLabel={(item) => {
                            return item ? item.media_name : "";
                          }}
                          isOptionEqualToValue={(option, value) => {
                            return option.id === value?.id;
                          }}
                          // filterOptions={(options, { inputValue }) => {
                          //   return options.filter((option) =>
                          //     option.media_name
                          //       .toLowerCase()
                          //       .includes(inputValue.toLowerCase())
                          //   );
                          // }}
                          renderInput={(params) => (
                            <TextField
                              {...params}
                              onClick={() => {
                                //setPreviewSelected(true);
                                //setSelectedMediaIndex(-1);
                              }}
                              label="Медиа-предпросмотр"
                              margin="normal"
                              variant="outlined"
                              error={!!errors.arms}
                              helperText={(errors as any)?.arms?.message}
                            />
                          )}
                        />
                      )}
                    />
                  </Box>

                  <input
                    type="hidden"
                    {...register("longitude", {
                      required: "Это поле является обязательным",
                      valueAsNumber: true,
                    })}
                  />
                  <input
                    type="hidden"
                    {...register("latitude", {
                      required: "Это поле является обязательным",
                      valueAsNumber: true,
                    })}
                  />

                  <Controller
                    control={control}
                    name="city_id"
                    rules={{ required: "Это поле является обязательным" }}
                    defaultValue={null}
                    render={() => <div />}
                  />

                  <Box sx={{ display: "none" }}>
                    <Controller
                      control={control}
                      name="thumbnail"
                      defaultValue={null}
                      render={({ field }) => (
                        <Autocomplete
                          {...mediaAutocompleteProps}
                          value={
                            mediaAutocompleteProps.options.find(
                              (option) => option.id === field.value
                            ) || null
                          }
                          onChange={(_, value) => {
                            field.onChange(value?.id || "");
                          }}
                          getOptionLabel={(item) => {
                            return item ? item.media_name : "";
                          }}
                          isOptionEqualToValue={(option, value) => {
                            return option.id === value?.id;
                          }}
                          filterOptions={(options, { inputValue }) => {
                            return options.filter(
                              (option) =>
                                option.media_name
                                  .toLowerCase()
                                  .includes(inputValue.toLowerCase()) &&
                                option.media_type === 3
                            );
                          }}
                          renderInput={(params) => (
                            <TextField
                              {...params}
                              label="Выберите логотип достопримечательности"
                              margin="normal"
                              variant="outlined"
                              error={!!errors.arms}
                              helperText={(errors as any)?.arms?.message}
                              required
                            />
                          )}
                        />
                      )}
                    />
                  </Box>

                  <Box sx={{ display: "none" }}>
                    <Controller
                      control={control}
                      name="watermark_lu"
                      defaultValue={null}
                      render={({ field }) => (
                        <Autocomplete
                          {...mediaAutocompleteProps}
                          value={
                            mediaAutocompleteProps.options.find(
                              (option) => option.id === field.value
                            ) || null
                          }
                          onChange={(_, value) => {
                            field.onChange(value?.id || "");
                          }}
                          getOptionLabel={(item) => {
                            return item ? item.media_name : "";
                          }}
                          isOptionEqualToValue={(option, value) => {
                            return option.id === value?.id;
                          }}
                          filterOptions={(options, { inputValue }) => {
                            return options.filter((option) =>
                              option.media_name
                                .toLowerCase()
                                .includes(inputValue.toLowerCase())
                            );
                          }}
                          renderInput={(params) => (
                            <TextField
                              {...params}
                              label="Выберите водяной знак (Левый верх)"
                              margin="normal"
                              variant="outlined"
                              error={!!errors.arms}
                              helperText={(errors as any)?.arms?.message}
                              required
                            />
                          )}
                        />
                      )}
                    />
                  </Box>
                  <Box sx={{ display: "none" }}>
                    <Controller
                      control={control}
                      name="watermark_rd"
                      defaultValue={null}
                      render={({ field }) => (
                        <Autocomplete
                          {...mediaAutocompleteProps}
                          value={
                            mediaAutocompleteProps.options.find(
                              (option) => option.id === field.value
                            ) || null
                          }
                          onChange={(_, value) => {
                            field.onChange(value?.id || "");
                          }}
                          getOptionLabel={(item) => {
                            return item ? item.media_name : "";
                          }}
                          isOptionEqualToValue={(option, value) => {
                            return option.id === value?.id;
                          }}
                          filterOptions={(options, { inputValue }) => {
                            return options.filter((option) =>
                              option.media_name
                                .toLowerCase()
                                .includes(inputValue.toLowerCase())
                            );
                          }}
                          renderInput={(params) => (
                            <TextField
                              {...params}
                              label="Выберите водяной знак (Правый вверх)"
                              margin="normal"
                              variant="outlined"
                              error={!!errors.arms}
                              helperText={(errors as any)?.arms?.message}
                              required
                            />
                          )}
                        />
                      )}
                    />
                  </Box>

                  <Controller
                    control={control}
                    name="left_article"
                    defaultValue={null}
                    render={({ field }) => (
                      <Autocomplete
                        {...articleAutocompleteProps}
                        value={
                          articleAutocompleteProps.options.find(
                            (option) => option.id === field.value
                          ) || null
                        }
                        onChange={(_, value) => {
                          field.onChange(value?.id || "");
                          setLeftArticleData(undefined);
                        }}
                        getOptionLabel={(item) => {
                          return item ? item.service_name : "";
                        }}
                        isOptionEqualToValue={(option, value) => {
                          return option.id === value?.id;
                        }}
                        filterOptions={(options, { inputValue }) => {
                          return options.filter((option) =>
                            option.service_name
                              .toLowerCase()
                              .includes(inputValue.toLowerCase())
                          );
                        }}
                        renderInput={(params) => (
                          <TextField
                            {...params}
                            label="Левая статья"
                            margin="normal"
                            variant="outlined"
                            error={!!errors.arms}
                            helperText={(errors as any)?.arms?.message}
                          />
                        )}
                      />
                    )}
                  />

                  {leftArticleId ? (
                    <Button
                      variant="outlined"
                      size="large"
                      sx={{
                        width: "100%",
                      }}
                      onClick={() => {
                        setArticleModalOpenAction(true);
                        setArticleIdAction(leftArticleId);
                      }}
                      color="secondary"
                    >
                      Редактировать выбранную левую статью
                    </Button>
                  ) : (
                    <>
                      <Typography
                        variant="h6"
                        gutterBottom
                        px={2}
                        py={0.5}
                        sx={{
                          color: "text.primary",
                        }}
                      >
                        Создать и прикрепить новую статью:
                      </Typography>
                      <CreateSightArticle
                        language={language}
                        parentId={sightId!}
                        parentResource="sight"
                        childResource="article"
                        title="статью"
                        left
                        setHeadingParent={(heading) => {
                          //console.log("Updating", heading)
                          setCreatingArticleHeading(heading);
                        }}
                        setBodyParent={(body) => {
                          setCreatingArticleBody(body);
                        }}
                      />
                    </>

                    // <Link to="/article/create">
                    //   <Button
                    //     variant="outlined"
                    //     size="large"
                    //     sx={{
                    //       width: "100%",
                    //     }}
                    //     color="secondary"
                    //   >
                    //     Создать новую статью
                    //   </Button>
                    // </Link>
                  )}
                </Box>
              </Box>
            </Box>
            <Paper
              sx={{
                p: 2,
                width: "30%",

                top: "179px",
                minHeight: "600px",
                right: 50,
                zIndex: 1000,
                borderRadius: 2,
                border: "1px solid",
                borderColor: "primary.main",
                bgcolor: "#806c59",
              }}
            >
              {leftArticleData?.media && (
                <MediaView media={leftArticleData.media} />
              )}

              {/* Заголовок статьи */}
              <Typography
                variant="h4"
                sx={{
                  wordWrap: "break-word",
                  color: (theme) =>
                    theme.palette.mode === "dark" ? "grey.300" : "grey.800",
                  mb: 3,
                  mt: 3,
                }}
              >
                {name}
              </Typography>

              {/* Адрес */}
              <Typography variant="body1" sx={{ mb: 2 }}>
                <Box component="span" sx={{ color: "text.secondary" }}>
                  Адрес:{" "}
                </Box>
                <Box
                  component="span"
                  sx={{
                    color: (theme) =>
                      theme.palette.mode === "dark" ? "grey.300" : "grey.800",
                  }}
                >
                  {addressContent}
                </Box>
              </Typography>

              <Box
                sx={{
                  "& img": {
                    maxWidth: "100%",
                    height: "auto",
                    borderRadius: 1,
                  },
                  "& h1, & h2, & h3, & h4, & h5, & h6": {
                    color: "primary.main",
                    mt: 2,
                    mb: 1,
                  },
                  "& p": {
                    mb: 2,
                    color: (theme) =>
                      theme.palette.mode === "dark" ? "grey.300" : "grey.800",
                  },
                  "& a": {
                    color: "primary.main",
                    textDecoration: "none",
                    "&:hover": {
                      textDecoration: "underline",
                    },
                  },
                  "& blockquote": {
                    borderLeft: "4px solid",
                    borderColor: "primary.main",
                    pl: 2,
                    my: 2,
                    color: "text.secondary",
                  },
                  "& code": {
                    bgcolor: (theme) =>
                      theme.palette.mode === "dark" ? "grey.900" : "grey.100",
                    p: 0.5,
                    borderRadius: 0.5,
                    color: "primary.main",
                  },
                }}
              >
                <ReactMarkdown rehypePlugins={[rehypeRaw]}>
                  {leftArticleId ? leftArticleData?.body : creatingArticleBody}
                </ReactMarkdown>
              </Box>
            </Paper>
          </Box>
        </Edit>
      </CustomTabPanel>

      <CustomTabPanel value={tabValue} index={1}>
        <Edit
          saveButtonProps={{
            ...saveButtonProps,
            onClick: handleFormSubmit,
          }}
          footerButtonProps={{
            sx: { bottom: 0, left: 0 },
          }}
        >
          <Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
            <Box sx={{ flex: 1, gap: 2, position: "relative" }}>
              <Box
                component="form"
                sx={{ flex: 1, display: "flex", flexDirection: "column" }}
                autoComplete="off"
              >
                <Controller
                  control={control}
                  name="preview_media"
                  defaultValue={null}
                  render={({ field }) => (
                    <Autocomplete
                      {...mediaAutocompleteProps}
                      value={
                        mediaAutocompleteProps.options.find(
                          (option) => option.id === field.value
                        ) || null
                      }
                      onChange={(_, value) => {
                        console.log(value, _);
                        field.onChange(value?.id || "");
                      }}
                      getOptionLabel={(item) => {
                        return item ? item.media_name : "";
                      }}
                      isOptionEqualToValue={(option, value) => {
                        return option.id === value?.id;
                      }}
                      filterOptions={(options, { inputValue }) => {
                        return options.filter((option) =>
                          option.media_name
                            .toLowerCase()
                            .includes(inputValue.toLowerCase())
                        );
                      }}
                      renderInput={(params) => (
                        <TextField
                          {...params}
                          onClick={() => {
                            setPreviewSelected(true);
                            //setSelectedMediaIndex(-1);
                          }}
                          label="Медиа-предпросмотр"
                          margin="normal"
                          variant="outlined"
                          error={!!errors.arms}
                          helperText={(errors as any)?.arms?.message}
                        />
                      )}
                    />
                  )}
                />
              </Box>
              <LanguageSelector action={handleLanguageChange} />
              <Box sx={{ mt: 3 }}>
                <Box sx={{ mb: 2 }}>
                  <Box sx={{ display: "flex", gap: 2, height: "min-content" }}>
                    <Box
                      sx={{
                        cursor: "pointer",
                        flex: 1,
                        display: "flex",
                        justifyContent: "center",
                        bgcolor:
                          articleAdditionMode === "attaching"
                            ? "primary.main"
                            : "transparent",
                        color:
                          articleAdditionMode === "attaching"
                            ? "white"
                            : "inherit",
                        borderRadius: 1,
                        p: 1,
                      }}
                      onClick={() => setArticleAdditionMode("attaching")}
                    >
                      Добавить существующую статью
                    </Box>
                    <Box
                      sx={{
                        cursor: "pointer",
                        flex: 1,
                        display: "flex",
                        justifyContent: "center",
                        bgcolor:
                          articleAdditionMode === "creating"
                            ? "primary.main"
                            : "transparent",
                        color:
                          articleAdditionMode === "creating"
                            ? "white"
                            : "inherit",
                        borderRadius: 1,
                        p: 1,
                      }}
                      onClick={() => setArticleAdditionMode("creating")}
                    >
                      Создать и привязать новую статью
                    </Box>
                  </Box>
                </Box>
                {articleAdditionMode === "attaching" && (
                  <Stack gap={2} mt={2}>
                    <Autocomplete
                      {...articleAutocompleteProps}
                      value={
                        articleAutocompleteProps.options.find(
                          (option) => option.id === selectedItemId
                        ) || null
                      }
                      onChange={(_, value) => {
                        setSelectedItemId(value?.id || "");
                        setLeftArticleData(undefined);
                      }}
                      getOptionLabel={(item) => {
                        return item ? item.service_name : "";
                      }}
                      isOptionEqualToValue={(option, value) => {
                        return option.id === value?.id;
                      }}
                      filterOptions={(options, { inputValue }) => {
                        return options.filter((option) =>
                          option.service_name
                            .toLowerCase()
                            .includes(inputValue.toLowerCase())
                        );
                      }}
                      renderInput={(params) => (
                        <TextField
                          {...params}
                          label="Добавляемая статья"
                          margin="normal"
                          variant="outlined"
                          error={!!errors.arms}
                          helperText={(errors as any)?.arms?.message}
                        />
                      )}
                    />
                    <Box sx={{ mt: -2, display: "flex", gap: 2 }}>
                      <Button
                        variant="contained"
                        onClick={linkItem}
                        disabled={!selectedItemId}
                        sx={{ alignSelf: "flex-start" }}
                      >
                        Добавить
                      </Button>
                      <Button
                        variant="outlined"
                        onClick={() => setSelectedItemId(undefined)}
                      >
                        Очистить
                      </Button>
                    </Box>
                  </Stack>
                )}
                {articleAdditionMode === "creating" && (
                  <CreateSightArticle
                    language={language}
                    parentId={sightId!}
                    parentResource="sight"
                    childResource="article"
                    title="статью"
                    //left
                    setHeadingParent={(heading) => {
                      console.log("Updating", heading);
                      setCreatingArticleHeading(heading);
                    }}
                    setBodyParent={(body) => {
                      setCreatingArticleBody(body);
                    }}
                  />
                )}
                <Typography
                  variant="subtitle1"
                  fontWeight="bold"
                  sx={{ mt: 4 }}
                >
                  Привязанные статьи
                </Typography>

                <LinkedItemsContents<ArticleItem>
                  type="edit"
                  disableCreation
                  parentId={sightId!}
                  dragAllowed={true}
                  setItemsParent={setLinkedArticles}
                  parentResource="sight"
                  fields={articleFields}
                  childResource="article"
                  title="статьи"
                  updatedLinkedItems={updatedLinkedArticles}
                />
              </Box>
            </Box>
            {/* Предпросмотр */}
            <Paper
              sx={{
                display: "flex",
                flexDirection: "column",
                p: 0,
                height: "max-content",
                minWidth: "400px",
                width: "30%",

                top: "178px",
                maxHeight: "600px",
                overflowY: "auto",
                right: 50,
                zIndex: 1000,
                borderRadius: 2,
                border: "1px solid",

                bgcolor: "#806c59",
              }}
            >
              <Box
                sx={{
                  display: "flex",
                  flexDirection: "column",
                  flexGrow: 1,
                }}
              >
                <Box
                  sx={{
                    mb: 2,
                    //margin: "0 auto",
                    display: "flex",
                    flexDirection: "column",
                    maxHeight: "300px",
                    gap: 2,
                  }}
                >
                  {previewSelected && previewMediaFile && (
                    <MediaView media={previewMediaFile} />
                  )}
                  {mediaFile && !previewSelected && (
                    <MediaView media={mediaFile} />
                  )}
                </Box>

                {
                  <Box
                    sx={{
                      //mt: "auto",
                      flexGrow: 1,
                      mb: 0,
                      display: "flex",
                      flexDirection: "column",
                      justifyContent: "space-between",
                      //height: "250px",
                      overflowY: "auto",
                    }}
                  >
                    {!previewSelected && articleAdditionMode !== "creating" && (
                      <Box
                        sx={{
                          display: "flex",
                          flexDirection: "column",
                          flexGrow: 1,
                          gap: 2,
                        }}
                      >
                        {selectedArticle && (
                          <Typography
                            variant="h4"
                            gutterBottom
                            px={2}
                            py={0.5}
                            sx={{
                              color: "text.primary",
                              background:
                                "linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
                              boxShadow:
                                "inset 4px 4px 12px hsla(0,0%,100%,.12)",
                            }}
                          >
                            {selectedArticle.heading}
                          </Typography>
                        )}

                        {selectedArticle && (
                          <Box
                            sx={{
                              mt: -6,
                              p: 2,
                              "& img": {
                                maxWidth: "100%",
                                height: "auto",
                                borderRadius: 1,
                              },
                              "& h1, & h2, & h3, & h4, & h5, & h6": {
                                color: "primary.main",
                                mt: 2,
                                mb: 1,
                              },
                              "& p": {
                                mb: 2,
                                color: (theme) =>
                                  theme.palette.mode === "dark"
                                    ? "grey.300"
                                    : "grey.800",
                              },
                              "& a": {
                                color: "primary.main",
                                textDecoration: "none",
                                "&:hover": {
                                  textDecoration: "underline",
                                },
                              },
                              "& blockquote": {
                                borderLeft: "4px solid",
                                borderColor: "primary.main",
                                pl: 2,
                                my: 2,
                                color: "text.secondary",
                              },
                              "& code": {
                                bgcolor: (theme) =>
                                  theme.palette.mode === "dark"
                                    ? "grey.900"
                                    : "grey.100",
                                p: 0.5,
                                borderRadius: 0.5,
                                color: "primary.main",
                              },
                            }}
                          >
                            <ReactMarkdown rehypePlugins={[rehypeRaw]}>
                              {selectedArticle.body}
                            </ReactMarkdown>
                          </Box>
                        )}
                      </Box>
                    )}

                    {articleAdditionMode === "creating" && (
                      <Box
                        sx={{
                          display: "flex",
                          flexDirection: "column",
                          flexGrow: 1,
                          gap: 2,
                        }}
                      >
                        <Typography
                          variant="h4"
                          gutterBottom
                          px={2}
                          py={0.5}
                          sx={{
                            color: "text.primary",
                            background:
                              "linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
                            boxShadow: "inset 4px 4px 12px hsla(0,0%,100%,.12)",
                          }}
                        >
                          {creatingArticleHeading}
                        </Typography>

                        <Box
                          sx={{
                            mt: -6,
                            p: 2,
                            "& img": {
                              maxWidth: "100%",
                              height: "auto",
                              borderRadius: 1,
                            },
                            "& h1, & h2, & h3, & h4, & h5, & h6": {
                              color: "primary.main",
                              mt: 2,
                              mb: 1,
                            },
                            "& p": {
                              mb: 2,
                              color: (theme) =>
                                theme.palette.mode === "dark"
                                  ? "grey.300"
                                  : "grey.800",
                            },
                            "& a": {
                              color: "primary.main",
                              textDecoration: "none",
                              "&:hover": {
                                textDecoration: "underline",
                              },
                            },
                            "& blockquote": {
                              borderLeft: "4px solid",
                              borderColor: "primary.main",
                              pl: 2,
                              my: 2,
                              color: "text.secondary",
                            },
                            "& code": {
                              bgcolor: (theme) =>
                                theme.palette.mode === "dark"
                                  ? "grey.900"
                                  : "grey.100",
                              p: 0.5,
                              borderRadius: 0.5,
                              color: "primary.main",
                            },
                          }}
                        >
                          <ReactMarkdown rehypePlugins={[rehypeRaw]}>
                            {creatingArticleBody}
                          </ReactMarkdown>
                        </Box>
                      </Box>
                    )}
                    <Box sx={{ mt: "auto" }}>
                      <Box
                        sx={{
                          display: "flex",
                          flexDirection: "row",
                          justifyContent: "center",
                          margin: "0 auto",
                          background:
                            "linear-gradient(180deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0)), hsla(29,15%,65%,.4)",
                          boxShadow: "inset 4px 4px 12px hsla(0,0%,100%,.12)",
                        }}
                      >
                        <Box
                          sx={{
                            display: "flex",
                            flexDirection: "row",
                            flexWrap: "wrap",
                            borderRadius: 2,
                          }}
                        >
                          {linkedArticles.map((article, index) => (
                            <Box
                              key={article.id}
                              onClick={() => {
                                setSelectedArticleIndex(index);
                                setPreviewSelected(false);
                              }}
                              sx={{
                                cursor: "pointer",
                                bgcolor: "transparent",
                                color: "inherit",
                                textDecoration:
                                  selectedArticleIndex === index
                                    ? "underline"
                                    : "none",
                                p: 1,
                                borderRadius: 1,
                              }}
                            >
                              <Typography variant="body1">
                                {article.heading}
                              </Typography>
                            </Box>
                          ))}
                        </Box>
                      </Box>
                    </Box>
                  </Box>
                }
              </Box>
            </Paper>
          </Box>
        </Edit>
      </CustomTabPanel>

      <CustomTabPanel value={tabValue} index={2}>
        <Edit
          saveButtonProps={{ ...saveButtonProps, onClick: handleFormSubmit }}
          footerButtonProps={{ sx: { bottom: 0, left: 0 } }}
        >
          <Box sx={{ display: "flex", flexDirection: "row", gap: 2 }}>
            <Box
              sx={{ display: "flex", flex: 1, gap: 2, position: "relative" }}
            >
              <Box
                component="form"
                sx={{ flex: 1, display: "flex", flexDirection: "column" }}
                autoComplete="off"
              >
                <LanguageSelector action={handleLanguageChange} />

                <Controller
                  control={control}
                  name="city_id"
                  //rules={{ required: "Это поле является обязательным" }}
                  defaultValue={null}
                  render={({ field }) => (
                    <Autocomplete
                      {...cityAutocompleteProps}
                      value={
                        cityAutocompleteProps.options.find(
                          (option) => option.id === field.value
                        ) || null
                      }
                      onChange={(_, value) => {
                        field.onChange(value?.id || "");
                      }}
                      getOptionLabel={(item) => {
                        return item ? item.name : "";
                      }}
                      isOptionEqualToValue={(option, value) => {
                        console.log(cityAutocompleteProps.options);
                        return option.id === value?.id;
                      }}
                      filterOptions={(options, { inputValue }) => {
                        return options.filter((option) =>
                          option.name
                            .toLowerCase()
                            .includes(inputValue.toLowerCase())
                        );
                      }}
                      renderInput={(params) => (
                        <TextField
                          {...params}
                          label="Выберите город"
                          margin="normal"
                          variant="outlined"
                          error={!!errors.city_id}
                          helperText={(errors as any)?.city_id?.message}
                        />
                      )}
                    />
                  )}
                />

                <Controller
                  control={control}
                  name="thumbnail"
                  defaultValue={null}
                  render={({ field }) => (
                    <Autocomplete
                      {...mediaAutocompleteProps}
                      value={
                        mediaAutocompleteProps.options.find(
                          (option) => option.id === field.value
                        ) || null
                      }
                      onChange={(_, value) => {
                        field.onChange(value?.id || "");
                      }}
                      getOptionLabel={(item) => {
                        return item ? item.media_name : "";
                      }}
                      isOptionEqualToValue={(option, value) => {
                        return option.id === value?.id;
                      }}
                      filterOptions={(options, { inputValue }) => {
                        return options.filter(
                          (option) =>
                            option.media_name
                              .toLowerCase()
                              .includes(inputValue.toLowerCase()) &&
                            option.media_type === 3
                        );
                      }}
                      renderInput={(params) => (
                        <TextField
                          {...params}
                          label="Выберите логотип достопримечательности"
                          margin="normal"
                          variant="outlined"
                          error={!!errors.arms}
                          helperText={(errors as any)?.arms?.message}
                        />
                      )}
                    />
                  )}
                />

                <Controller
                  control={control}
                  name="watermark_lu"
                  defaultValue={null}
                  render={({ field }) => (
                    <Autocomplete
                      {...mediaAutocompleteProps}
                      value={
                        mediaAutocompleteProps.options.find(
                          (option) => option.id === field.value
                        ) || null
                      }
                      onChange={(_, value) => {
                        field.onChange(value?.id || "");
                      }}
                      getOptionLabel={(item) => {
                        return item ? item.media_name : "";
                      }}
                      isOptionEqualToValue={(option, value) => {
                        return option.id === value?.id;
                      }}
                      filterOptions={(options, { inputValue }) => {
                        return options.filter(
                          (option) =>
                            option.media_name
                              .toLowerCase()
                              .includes(inputValue.toLowerCase()) &&
                            option.media_type === 4
                        );
                      }}
                      renderInput={(params) => (
                        <TextField
                          {...params}
                          label="Выберите водяной знак (Левый верх)"
                          margin="normal"
                          variant="outlined"
                          error={!!errors.arms}
                          helperText={(errors as any)?.arms?.message}
                        />
                      )}
                    />
                  )}
                />

                <Controller
                  control={control}
                  name="watermark_rd"
                  defaultValue={null}
                  render={({ field }) => (
                    <Autocomplete
                      {...mediaAutocompleteProps}
                      value={
                        mediaAutocompleteProps.options.find(
                          (option) => option.id === field.value
                        ) || null
                      }
                      onChange={(_, value) => {
                        field.onChange(value?.id || "");
                      }}
                      getOptionLabel={(item) => {
                        return item ? item.media_name : "";
                      }}
                      isOptionEqualToValue={(option, value) => {
                        return option.id === value?.id;
                      }}
                      filterOptions={(options, { inputValue }) => {
                        return options.filter(
                          (option) =>
                            option.media_name
                              .toLowerCase()
                              .includes(inputValue.toLowerCase()) &&
                            option.media_type === 4
                        );
                      }}
                      renderInput={(params) => (
                        <TextField
                          {...params}
                          label="Выберите водяной знак (Правый вверх)"
                          margin="normal"
                          variant="outlined"
                          error={!!errors.arms}
                          helperText={(errors as any)?.arms?.message}
                        />
                      )}
                    />
                  )}
                />

                <TextField
                  value={coordinates}
                  onChange={handleCoordinatesChange}
                  error={!!(errors as any)?.latitude}
                  helperText={(errors as any)?.latitude?.message}
                  margin="normal"
                  fullWidth
                  slotProps={{ inputLabel: { shrink: true } }}
                  type="text"
                  label={"Координаты *"}
                />
              </Box>

              {/* Предпросмотр */}
              <Paper
                sx={{
                  p: 2,
                  minWidth: "fit-content",
                  width: "30%",

                  top: "178px",

                  right: 50,
                  zIndex: 1000,
                  borderRadius: 2,
                  border: "1px solid",
                  borderColor: "primary.main",
                  bgcolor: (theme) =>
                    theme.palette.mode === "dark" ? "background.paper" : "#fff",
                }}
              >
                <Typography variant="h6" gutterBottom color="primary">
                  Предпросмотр
                </Typography>

                {thumbnailPreview && (
                  <Box>
                    <Typography
                      variant="body1"
                      sx={{ display: "flex", flexDirection: "column", mb: 2 }}
                    >
                      <Box component="span" sx={{ color: "text.secondary" }}>
                        Адрес:{" "}
                      </Box>
                      <Box
                        component="span"
                        sx={{
                          color: (theme) =>
                            theme.palette.mode === "dark"
                              ? "grey.300"
                              : "grey.800",
                        }}
                      >
                        {`${addressContent}`}
                      </Box>
                    </Typography>
                    <Typography
                      variant="body2"
                      gutterBottom
                      sx={{ color: "text.secondary" }}
                    >
                      Логотип достопримечательности:
                    </Typography>
                    <Box
                      component="img"
                      src={thumbnailPreview}
                      alt="Логотип достопримечательности"
                      sx={{
                        width: "50%",
                        objectFit: "cover",
                        borderRadius: 1,
                        marginBottom: 2,
                      }}
                    />
                  </Box>
                )}

                {/* Водяные знаки */}
                <Box sx={{ mb: 2 }}>
                  <Typography
                    variant="body1"
                    gutterBottom
                    sx={{ color: "text.secondary" }}
                  >
                    Водяные знаки:
                  </Typography>
                  <Box sx={{ display: "flex", gap: 2 }}>
                    {watermarkLUPreview && (
                      <Box>
                        <Typography
                          variant="body2"
                          gutterBottom
                          sx={{ color: "text.secondary" }}
                        >
                          Левый верхний:
                        </Typography>
                        <Box
                          component="img"
                          src={watermarkLUPreview}
                          alt="Водяной знак (ЛВ)"
                          sx={{
                            width: 100,
                            height: 100,
                            objectFit: "cover",
                            borderRadius: 1,
                            border: "1px solid",
                            borderColor: "primary.main",
                          }}
                        />
                      </Box>
                    )}
                    {watermarkRDPreview && (
                      <Box>
                        <Typography
                          variant="body2"
                          gutterBottom
                          sx={{ color: "text.secondary" }}
                        >
                          Правый верхний:
                        </Typography>
                        <Box
                          component="img"
                          src={watermarkRDPreview}
                          alt="Водяной знак (ПН)"
                          sx={{
                            width: 100,
                            height: 100,
                            objectFit: "cover",
                            borderRadius: 1,
                            border: "1px solid",
                            borderColor: "primary.main",
                          }}
                        />
                      </Box>
                    )}
                  </Box>
                  {/* Координаты */}
                  <Typography
                    variant="body1"
                    sx={{ display: "flex", flexDirection: "column", mb: 2 }}
                  >
                    <Box component="span" sx={{ color: "text.secondary" }}>
                      Координаты:{" "}
                    </Box>
                    <Box
                      component="span"
                      sx={{
                        color: (theme) =>
                          theme.palette.mode === "dark"
                            ? "grey.300"
                            : "grey.800",
                      }}
                    >
                      {coordinatesPreview}
                    </Box>
                  </Typography>
                </Box>
              </Paper>
            </Box>
          </Box>
        </Edit>
      </CustomTabPanel>
      <ArticleEditModal />
    </Box>
  );
});