import {
  authInstance,
  languageInstance,
  languageStore,
  SightBaseInfo,
} from "@shared";
import { computed, makeAutoObservable, runInAction } from "mobx";

export type Language = "ru" | "en" | "zh";

export type MultilingualContent = {
  [key in Language]: {
    name: string;
    address: string;
  };
};

export type Sight = {
  id: number;
  name: string;
  city_id: number;
  city: string;
  address: string;
  latitude: number;
  longitude: number;
  thumbnail: string | null;
  watermark_lu: string | null;
  watermark_rd: string | null;
  left_article: number;
  preview_media: string;
  video_preview: string | null;
};

export type CreateSight = {
  [key in Language]: {
    name: string;
    address: string;
  };
};

class SightsStore {
  sights: Sight[] = [];
  sight: Sight | null = null;
  createSight: CreateSight = {
    ru: { name: "", address: "" },
    en: { name: "", address: "" },
    zh: { name: "", address: "" },
  };

  constructor() {
    makeAutoObservable(this);
  }

  getSights = async () => {
    const response = await authInstance.get("/sight");
    runInAction(() => {
      this.sights = response.data;
    });
  };

  // getSight = async (id: number) => {
  //   const response = await authInstance.get(`/sight/${id}`);

  //   runInAction(() => {
  //     this.sight = response.data;
  //     editSightStore.sightInfo = {
  //       ...editSightStore.sightInfo,
  //       id: response.data.id,
  //       city_id: response.data.city_id,
  //       city: response.data.city,
  //       latitude: response.data.latitude,
  //       longitude: response.data.longitude,
  //       thumbnail: response.data.thumbnail,
  //       watermark_lu: response.data.watermark_lu,
  //       watermark_rd: response.data.watermark_rd,
  //       left_article: response.data.left_article,
  //       preview_media: response.data.preview_media,
  //       video_preview: response.data.video_preview,

  //       [languageStore.language]: {
  //         info: {
  //           name: response.data.name,
  //           address: response.data.address,
  //         },
  //         left: {
  //           heading: articlesStore.articles[languageStore.language].find(
  //             (article) => article.id === response.data.left_article
  //           )?.heading,
  //           body: articlesStore.articles[languageStore.language].find(
  //         },
  //       },
  //     };
  //   });
  // };

  createSightAction = async (
    city: number,
    coordinates: { latitude: number; longitude: number }
  ) => {
    const response = await authInstance.post("/sight", {
      name: this.createSight[languageStore.language].name,
      address: this.createSight[languageStore.language].address,
      city_id: city,
      latitude: coordinates.latitude,
      longitude: coordinates.longitude,
    });

    runInAction(() => {
      this.sights.push(response.data);
    });

    const id = response.data.id;

    const anotherLanguages = ["ru", "en", "zh"].filter(
      (language) => language !== languageStore.language
    );

    await languageInstance(anotherLanguages[0] as Language).patch(
      `/sight/${id}`,
      {
        name: this.createSight[anotherLanguages[0] as Language].name,
        address: this.createSight[anotherLanguages[0] as Language].address,
        city_id: city,
        latitude: coordinates.latitude,
        longitude: coordinates.longitude,
      }
    );

    await languageInstance(anotherLanguages[1] as Language).patch(
      `/sight/${id}`,
      {
        name: this.createSight[anotherLanguages[1] as Language].name,
        address: this.createSight[anotherLanguages[1] as Language].address,
        city_id: city,
        latitude: coordinates.latitude,
        longitude: coordinates.longitude,
      }
    );

    runInAction(() => {
      this.createSight = {
        ru: { name: "", address: "" },
        en: { name: "", address: "" },
        zh: { name: "", address: "" },
      };
    });
  };
  setCreateSight = (content: CreateSight) => {
    runInAction(() => {
      this.createSight = content;
    });
  };

  updateCreateSight = (
    language: Language,
    content: Partial<CreateSight[Language]>
  ) => {
    this.createSight[language] = {
      ...this.createSight[language],
      ...content,
    };
  };

  updateSight = (
    language: Language,
    content: Partial<SightBaseInfo[Language]>,
    common: boolean
  ) => {
    if (common) {
      // @ts-ignore
      this.sight!.common = {
        // @ts-ignore
        ...this.sight!.common,
        ...content,
      };
    } else {
      // @ts-ignore
      this.sight![language] = {
        // @ts-ignore
        ...this.sight![language],
        ...content,
      };
    }
  };

  clearCreateSight = () => {
    runInAction(() => {
      this.createSight = {
        ru: {
          name: "",
          address: "",
        },
        en: {
          name: "",
          address: "",
        },
        zh: {
          name: "",
          address: "",
        },
      };
    });
  };

  sightData = computed(() => {
    return {
      name: this.sight?.name,
      address: this.sight?.address,
      city_id: this.sight?.city_id,
      latitude: this.sight?.latitude,
      longitude: this.sight?.longitude,
      thumbnail: this.sight?.thumbnail,
      watermark_lu: this.sight?.watermark_lu,
      watermark_rd: this.sight?.watermark_rd,
      left_article: this.sight?.left_article,
      preview_media: this.sight?.preview_media,
      video_preview: this.sight?.video_preview,
      [languageStore.language]: {
        info: {
          name: this.sight?.name,
          address: this.sight?.address,
        },
      },
    };
  });

  deleteListSight = async (id: number) => {
    await authInstance.delete(`/sight/${id}`);
    this.sights = this.sights.filter((sight) => sight.id !== id);
  };
}

export const sightsStore = new SightsStore();