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;
    short_name: string;
    address: string;
  };
};

export type Sight = {
  id: number;
  name: string;
  short_name: string | null;
  city_id: number;
  city: string;
  address: string;
  latitude: number;
  longitude: number;
  is_default_icon: boolean;
  thumbnail: string | null;
  icon: string | null;
  alt_icon: 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;
    short_name: string;
    address: string;
  };
};

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

  constructor() {
    makeAutoObservable(this);
  }

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

  createSightAction = async (
    city: number,
    coordinates: { latitude: number; longitude: number }
  ) => {
    const response = await authInstance.post("/sight", {
      name: this.createSight[languageStore.language].name,
      short_name: this.createSight[languageStore.language].short_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,
        short_name: this.createSight[anotherLanguages[0] as Language].short_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,
        short_name: this.createSight[anotherLanguages[1] as Language].short_name,
        address: this.createSight[anotherLanguages[1] as Language].address,
        city_id: city,
        latitude: coordinates.latitude,
        longitude: coordinates.longitude,
      }
    );

    runInAction(() => {
      this.createSight = {
        ru: { name: "", short_name: "", address: "" },
        en: { name: "", short_name: "", address: "" },
        zh: { name: "", short_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: "",
          short_name: "",
          address: "",
        },
        en: {
          name: "",
          short_name: "",
          address: "",
        },
        zh: {
          name: "",
          short_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,
      is_default_icon: this.sight?.is_default_icon,
      thumbnail: this.sight?.thumbnail,
      icon: this.sight?.icon,
      alt_icon: this.sight?.alt_icon,
      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();
