import React from "react";

import Card from "@/components/ui/card/card";
import { Skeleton } from "@/components/ui/skeleton/skeleton";
import { useLocale } from "@/hooks/useLocale";
import type { Result } from "@/services/eva-panel/get-user-settings/get-user-settings";
import { useGetUsetSettingsQuery } from "@/services/eva-panel/get-user-settings/get-user-settings";

export default function Communation() {
  const getUserSettings = useGetUsetSettingsQuery();
  const getUserSettingsData = getUserSettings.data?.Result;
  const { t } = useLocale();
  const getDataByPropertyId = (data: Result[], name: string) => {
    return data?.find((item) => item?.PropertyName === name);
  };

  const adressData = getDataByPropertyId(getUserSettingsData ?? [], "Adres");
  const adressProvinceData = getDataByPropertyId(
    getUserSettingsData ?? [],
    "İlçe",
  );
  const adressCityData = getDataByPropertyId(
    getUserSettingsData ?? [],
    "Şehir",
  );
  const adressCountryData = getDataByPropertyId(
    getUserSettingsData ?? [],
    "Ülke",
  );
  const callCenterData = getDataByPropertyId(
    getUserSettingsData ?? [],
    "Çağrı Merkezi",
  );
  const callCenterInfoData = getDataByPropertyId(
    getUserSettingsData ?? [],
    "Çağrı Merkezi Bilgilendirme",
  );
  const phoneData = getDataByPropertyId(getUserSettingsData ?? [], "Telefon");
  const faxData = getDataByPropertyId(getUserSettingsData ?? [], "Fax");
  const emailData = getDataByPropertyId(getUserSettingsData ?? [], "Email");

  if (!getUserSettings.isSuccess) {
    return (
      <div>
        <Skeleton className="h-[800px]" />
      </div>
    );
  }

  return (
    <Card>
      <h2 className="mb-4 text-lg font-semibold text-gray-800 md:text-2xl">
        {t("Contact")}
      </h2>

      <div className="flex flex-col gap-4">
        {(adressData?.PropertyValue ||
          adressProvinceData?.PropertyValue ||
          adressCityData?.PropertyValue ||
          adressCountryData?.PropertyValue) && (
          <p className="text-base text-gray-500 md:text-sm">
            {adressData?.CulturedPropertyName && (
              <strong>{`${adressData?.CulturedPropertyName} : `}</strong>
            )}
            {(adressData?.PropertyName && adressData?.PropertyValue) ||
              (adressData?.PropertyValue !== null &&
                `${adressData?.PropertyValue}`)}
            {adressProvinceData?.PropertyValue !== null &&
              adressProvinceData?.PropertyValue &&
              `, ${adressProvinceData?.PropertyValue}`}
            {adressCityData?.PropertyValue !== null &&
              adressCityData?.PropertyValue &&
              ` / ${adressCityData?.PropertyValue}`}
            {adressCountryData?.PropertyValue !== null &&
              adressCountryData?.PropertyValue &&
              ` / ${adressCountryData?.PropertyValue}`}
          </p>
        )}

        {phoneData?.PropertyValue !== null && phoneData?.PropertyValue && (
          <p className="text-base text-gray-500 md:text-sm">
            <strong>
              {phoneData?.CulturedPropertyName &&
                `${phoneData?.CulturedPropertyName} : `}
            </strong>
            {phoneData?.PropertyValue}
          </p>
        )}

        {faxData?.PropertyValue !== null && faxData?.PropertyValue && (
          <p className="text-base text-gray-500 md:text-sm">
            <strong>
              {faxData?.CulturedPropertyName &&
                `${faxData?.CulturedPropertyName} : `}
            </strong>
            {faxData?.PropertyValue}
          </p>
        )}

        {(callCenterData?.PropertyValue ||
          callCenterInfoData?.PropertyValue) && (
          <p className="text-base text-gray-500 md:text-sm">
            {callCenterData?.CulturedPropertyName && (
              <strong>{`${callCenterData?.CulturedPropertyName} : `}</strong>
            )}
            {(callCenterData?.PropertyValue !== null &&
              callCenterData?.PropertyName &&
              callCenterData?.PropertyValue) ||
              (callCenterData?.PropertyValue !== null &&
                `${callCenterData?.PropertyValue} `)}
            {callCenterInfoData?.PropertyValue !== null &&
              callCenterInfoData?.PropertyValue &&
              ` (${callCenterInfoData?.PropertyValue})`}
          </p>
        )}

        {emailData?.PropertyValue !== null && emailData?.PropertyValue && (
          <p className="text-base text-gray-500 md:text-sm">
            <strong>
              {emailData?.CulturedPropertyName &&
                `${emailData?.CulturedPropertyName} : `}
            </strong>
            {emailData?.PropertyValue}
          </p>
        )}
      </div>
    </Card>
  );
}