import {
  authInstance,
  cityStore,
  languageStore,
  languageInstance,
  Language,
} from "@shared";
import { makeAutoObservable, runInAction } from "mobx";

export type Carrier = {
  id: number;
  short_name: string;
  full_name: string;
  slogan: string;
  city: string;
  city_id: number;
  logo: string;
  // main_color: string;
  // left_color: string;
  // right_color: string;
};

type CarrierData = {
  data: Carrier[];
  loaded: boolean;
};

type Carriers = {
  ru: CarrierData;
  en: CarrierData;
  zh: CarrierData;
};

type CashedCarrier = Record<
  number,
  {
    ru: Carrier | null;
    en: Carrier | null;
    zh: Carrier | null;
  }
>;

class CarrierStore {
  carriers: Carriers = {
    ru: {
      data: [],
      loaded: false,
    },
    en: {
      data: [],
      loaded: false,
    },
    zh: {
      data: [],
      loaded: false,
    },
  };
  carrier: CashedCarrier = {};

  constructor() {
    makeAutoObservable(this);
  }

  getCarriers = async (language: Language) => {
    if (this.carriers[language as keyof Carriers].loaded) return;

    const response = await languageInstance(language).get("/carrier");

    runInAction(() => {
      this.carriers[language as keyof Carriers].data = response.data;
      this.carriers[language as keyof Carriers].loaded = true;
    });
  };

  deleteCarrier = async (id: number) => {
    await authInstance.delete(`/carrier/${id}`);

    runInAction(() => {
      for (const language of ["ru", "en", "zh"] as const) {
        this.carriers[language].data = this.carriers[language].data.filter(
          (carrier: Carrier) => carrier.id !== id
        );
      }
      delete this.carrier[id];
    });
  };

  getCarrier = async (id: number) => {
    if (this.carrier[id]?.ru && this.carrier[id]?.en && this.carrier[id]?.zh)
      return;

    const ruResponse = await languageInstance("ru").get(`/carrier/${id}`);
    const enResponse = await languageInstance("en").get(`/carrier/${id}`);
    const zhResponse = await languageInstance("zh").get(`/carrier/${id}`);

    runInAction(() => {
      if (!this.carrier[id]) {
        this.carrier[id] = {
          ru: null,
          en: null,
          zh: null,
        };
      }
      this.carrier[id].ru = ruResponse.data;
      this.carrier[id].en = enResponse.data;
      this.carrier[id].zh = zhResponse.data;
    });
    return this.carrier[id];
  };

  createCarrierData = {
    city_id: 0,
    logo: "",
    ru: {
      full_name: "",
      short_name: "",
      slogan: "",
    },
    en: {
      full_name: "",
      short_name: "",
      slogan: "",
    },
    zh: {
      full_name: "",
      short_name: "",
      slogan: "",
    },
  };

  setCreateCarrierData = (
    fullName: string,
    shortName: string,
    cityId: number,
    slogan: string,
    logoId: string,
    language: Language
  ) => {
    this.createCarrierData.city_id = cityId;
    this.createCarrierData.logo = logoId;
    this.createCarrierData[language] = {
      full_name: fullName,
      short_name: shortName,
      slogan: slogan,
    };
  };

  createCarrier = async () => {
    const { language } = languageStore;
    const cityName =
      cityStore.cities[language].data.find(
        (city) => city.id === this.createCarrierData.city_id
      )?.name || "";

    const payload = {
      full_name: this.createCarrierData[language].full_name,
      short_name: this.createCarrierData[language].short_name,
      city: cityName,
      city_id: this.createCarrierData.city_id,
      slogan: this.createCarrierData[language].slogan,
      ...(this.createCarrierData.logo
        ? { logo: this.createCarrierData.logo }
        : {}),
    };

    const response = await languageInstance(language).post("/carrier", payload);

    const carrierId = response.data.id;

    runInAction(() => {
      this.carriers[language].data.push(response.data);
    });

    for (const lang of ["ru", "en", "zh"].filter((l) => l !== language)) {
      const patchPayload = {
        // @ts-ignore
        full_name: this.createCarrierData[lang as any].full_name as string,
        // @ts-ignore
        short_name: this.createCarrierData[lang as any].short_name as string,
        city: cityName,
        city_id: this.createCarrierData.city_id,
        // @ts-ignore
        slogan: this.createCarrierData[lang as any].slogan as string,
        ...(this.createCarrierData.logo
          ? { logo: this.createCarrierData.logo }
          : {}),
      };

      const response = await languageInstance(lang as Language).patch(
        `/carrier/${carrierId}`,
        patchPayload
      );

      runInAction(() => {
        this.carriers[lang as keyof Carriers].data.push(response.data);
      });
    }

    this.createCarrierData = {
      city_id: 0,
      logo: "",
      ru: {
        full_name: "",
        short_name: "",
        slogan: "",
      },
      en: {
        full_name: "",
        short_name: "",
        slogan: "",
      },
      zh: {
        full_name: "",
        short_name: "",
        slogan: "",
      },
    };
  };

  editCarrierData = {
    ru: {
      full_name: "",
      short_name: "",

      // main_color: "",
      // left_color: "",
      // right_color: "",
      slogan: "",
    },
    en: {
      full_name: "",
      short_name: "",

      // main_color: "",
      // left_color: "",
      // right_color: "",
      slogan: "",
    },
    city_id: 0,
    logo: "",
    zh: {
      full_name: "",
      short_name: "",

      // main_color: "",
      // left_color: "",
      // right_color: "",
      slogan: "",
    },
  };

  setEditCarrierData = (
    fullName: string,
    shortName: string,
    cityId: number,
    // main_color: string,
    // left_color: string,
    // right_color: string,
    slogan: string,
    logoId: string,
    language: Language
  ) => {
    this.editCarrierData.city_id = cityId;
    this.editCarrierData.logo = logoId;
    this.editCarrierData[language] = {
      full_name: fullName,
      short_name: shortName,
      // main_color: main_color,
      // left_color: left_color,
      // right_color: right_color,
      slogan: slogan,
    };
  };

  editCarrier = async (id: number) => {
    const { language } = languageStore;
    const cityName =
      cityStore.cities[language].data.find(
        (city) => city.id === this.editCarrierData.city_id
      )?.name || "";

    for (const lang of ["ru", "en", "zh"] as const) {
      const response = await languageInstance(lang).patch(`/carrier/${id}`, {
        ...this.editCarrierData[lang],
        city: cityName,
        city_id: this.editCarrierData.city_id,
        ...(this.editCarrierData.logo
          ? { logo: this.editCarrierData.logo }
          : {}),
      });

      runInAction(() => {
        if (this.carrier[id]) {
          this.carrier[id][lang] = response.data;
        }

        this.carriers[lang].data = this.carriers[lang].data.map(
          (carrier: Carrier) =>
            carrier.id === id ? { ...carrier, ...response.data } : carrier
        );
      });
    }
  };
}

export const carrierStore = new CarrierStore();