"use client";
import Header from "../../app/components/navbar";
import Image from "next/image";
import dataMining from "../../public/assets/icons/mining.svg";
import bmpImage from "../../public/assets/icons/bpms.svg";
import alImage from "../../public/assets/icons/al.svg";
import style from "../index.module.css";
import interduceImg from "../../public/assets/photos/secondInterDuce.png";
import Slider from "react-slick";
import boton from "../../public/assets/photos/boton.png";
import denik from "../../public/assets/photos/denik.jpg";
import firstCustomer from "../../public/assets/photos/customer.jpg";
import Customer2 from "../../public/assets/photos/customer2.jpg";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Footer from "../../app/components/footer";
import { useEffect, useState } from "react";
import Head from "next/head";
import panelAxios from "../../app/services/panelAxios";
import dotenv from "dotenv";
import Link from "next/link";

const MainClient = ({ data }) => {
  const [backwardStatus, setbackwardStatus] = useState(null);

  const [customerSlider, setCustomerSlider] = useState(null);
  const [companyServices, setCompanyServices] = useState(null);
  // const [pageContent, setPageContent] = useState();
  const settings = {
    dots: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 2000,
    speed: 2000,
    slidesToShow: 2,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          infinite: true,
        },
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          initialSlide: 1,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };
  const [authtoken, setAuthToken] = useState("");
  dotenv.config();

  // const getUser = async () => {
  //   debugger;
  //   const res = await panelAxios
  //     .post("person/login", {
  //       userName: "mehrdad",
  //       password: "13811381",
  //     })
  //     .catch((err) => {
  //       console.log(err);
  //     });
  //   const data = await JSON.parse(res.data.data)?.Token?.AccessToken;
  //   return data;
  // };

  const submitView = async (tokenFromEnv, ip) => {
    const raw = JSON.stringify({
      // ViewStatisticsFromTheSite: [
      //   {
      //     Name: "IP",
      //     Value: ip
      //   },
      //   {
      //     Name: "ViewTime",
      //     Value: ""
      //   },
      //   {
      //     Name: "ViewDate",
      //     Value: ""
      //   }
      // ]
      ViewStatisticsFromTheSite: {
        IP: ip,
        ViewTime: "",
        ViewDate: "",
      },
    });
    await panelAxios
      .post("api/save", raw, {
        headers: {
          Authorization: `Bearer ${tokenFromEnv}`,
        },
      })
      .catch(async (err) => {
        console.log("error is Active!", err);
        const userToken = await getUser();
        const ipAddress = await getIP();
        const raw = JSON.stringify({
          ViewStatisticsFromTheSite: {
            IP: ipAddress,
            ViewTime: "",
            ViewDate: "",
          },
        });

        await panelAxios.post("api/save", raw, {
          headers: {
            Authorization: `Bearer ${userToken}`,
          },
        });
      });
  };

  // const getIP = async () => {
  //   try {
  //     const res = await fetch("https://api64.ipify.org?format=json");
  //     const data = await res.json();
  //     return data.ip;
  //   } catch (e) {
  //     console.log(e);
  //   }
  // };

  useEffect(() => {
    setCustomerSlider(JSON.parse(data.customer));
    setCompanyServices(JSON.parse(data.service));
  }, []);

  // useEffect(async () => {
  //   let tokenFromEnv = process.env.TOKEN;
  //   if (tokenFromEnv != "" && tokenFromEnv != undefined) {
  //     console.log("have token");
  //     const ipAddress = await getIP();
  //     await submitView(tokenFromEnv, ipAddress);
  //   } else {
  //     console.log("Do Not Have Token");
  //     const userToken = await getUser();
  //     // process.env.TOKEN = userToken;
  //     setAuthToken(userToken);
  //     const ipAddress = await getIP();
  //     await submitView(userToken, ipAddress);
  //   }
  // }, []);

  return (
    <>
      <Head>
        <title>{data?.company_name}</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="/assets/photos/logo.svg" />
      </Head>
      <Header
        backwardStatus={backwardStatus}
        setbackwardStatus={setbackwardStatus}
        data={data}
      />
      <div className={style.parent}>
        <div className="container">
          <div className={style.headContent}>
            <div className={style.content}>
              <div className={style.desc}>
                <div className={`${style.title} right`}>
                  <h1 className="txtPrimary">معرفی</h1>
                  <h1 className="txtSecondPrimary">{data?.company_name}</h1>
                </div>
                <p>
                  {data?.company_introduction}
                  {/* با گسترش فناوری اطلاعات در سراسر دنیا و پیشرفت های شگرف در
                  ساخت تجهیزات الکترونیکی، مفهوم جدیدی در دنیای اقتصاد مطرح شد
                  که اکنون ارزشمندترین عنصر کمپانی های کوچک و بزرگ در تمام دنیا
                  به حساب می آید و آن چیزی نیست جز مفهوم "داده". با وجود کلان
                  داده هایی که در اختیار کمپانی های مختلف قرار دارد، علم "داده
                  کاوی" و مزیت های فوق العاده ارزشمند این علم که به صورت پیدا و
                  پنهان برای کمپانی ها به ارمغان می آورد، از درجه اهمیت روزافزون
                  برخوردار می شود. این مهم، جمعی از متخصصین علم کامپیوتر در مشهد
                  را بر آن داشت تا با کوله باری بیش از ده ساله در زمینه های
                  مختلف کامپیوتری اقدام به راه اندازی شرکت "داده کاوی سپهر توس"
                  نمایند. متخصصینی تحصیل کرده در رشته های نرم افزار، فناوری
                  اطلاعات، هوش مصنوعی و ... در دانشگاه های خواجه نصیرالدین طوسی،
                  فردوسی، آزاد و ...، با توانمندی در زمینه های برنامه نویسی های
                  پیشرفته و متخصص در علوم داده و ...، در این شرکت گرد هم آمده
                  اند. */}
                </p>
              </div>
              <div className={style.image}>
                <Image src={interduceImg} alt="interduce" priority={true} />
              </div>
            </div>
          </div>

          <div className={style.services}>
            <div className={style.title}>
              <h1 className="icon triAngleIcon txtPrimary">خدمات</h1>
              <h1 className="txtSecondPrimary">{data?.company_name}</h1>
            </div>
            <div className={style.cards}>
              {companyServices?.map((el) => {
                return (
                  <div
                    className="card"
                    key={`service-${el.WorkflowID1}-${el.ValueP1161S1750StageID}`}
                  >
                    <div className="head">
                      <div className="cardLogo">
                        <Image
                          src={dataMining}
                          alt="DataMining"
                          priority={true}
                        />
                      </div>
                      <h1>{data?.title}</h1>
                    </div>
                    <div className="content">
                      <p className="minimize">{el?.description}</p>
                    </div>
                  </div>
                );
              })}

              {/* <div className="card">
                <div className="head">
                  <div className="cardLogo">
                    <Image src={bmpImage} alt="DataMining" priority={true} />
                  </div>
                  <h1>BPMS</h1>
                </div>
                <div className="content">
                  <p className="minimize ">
                    مدیریت فرایند کسب و کار (BPM) بر استقرار فرایندی خودکار و
                    یک‌پارچه برای معاملات معمول و تعاملات انسانی متمرکز است. این
                    حوزه از مدیریت از طریق کاهش دوباره‌کاری و اتلاف‌، به کاهش
                    هزینه در سازمان و کارایی تیم‌ها کمک می‌کند.
                  </p>
                </div>
              </div>
              <div className="card">
                <div className="head">
                  <div className="cardLogo">
                    <Image src={alImage} alt="DataMining" priority={true} />
                  </div>
                  <h1>Artificial Intelligence</h1>
                </div>
                <div className="content">
                  <p className="minimize">
                    هوش مصنوعی شامل شاخه های متنوعی است که مباحث داده کاوی،
                    پردازش متن، پردازش تصویر و در کل هوشمند سازی سامانه های
                    مختلف با استفاده از پیشرفته ترین الگوریتم ها از توانمندی های
                    متخصصین سپهر می باشد.
                  </p>
                </div>
              </div> */}
            </div>
          </div>
          <div className={style.mainContent}>
            <div className={style.hyperAutomation}>
              <div className={style.aboutHyper}>
                <div className={`${style.title} right`}>
                  <h1 className="icon triAngleIcon txtPrimary">هایپر</h1>
                  <h1 className="txtSecondPrimary">اتوماسیون</h1>
                </div>
                <div className={style.hyperDesc}>
                  <p className="minimize seventh">
                    {data?.product_introduction}
                    {/* هایپر اتوماسیون ابزاری است که از فناوری های هوشمند برای
                    خودکارسازی فعالیت هایی که توسط انسان انجام می شوند، استفاده
                    می کند. فناوری های مورد استفاده در هایپر اتوماسیون شامل هوش
                    مصنوعی (Artificial intelligence)، یادگیری ماشین (Machine
                    Learning)، سیستم مدیریت فرآیندهای تجاری (Business Process
                    Management System) و اتوماسیون فرآیند رباتیک (Robotic
                    Process Automation) می باشند. هایپر اتوماسیون بر وظایف و
                    فرآیندهای قابل خودکارسازی تمرکز دارد و اغلب از آن به عنوان
                    مرحله اصلی بعدی تحول دیجیتال یاد می‌شود. */}
                  </p>
                </div>
              </div>
              <div className={style.descRobot}>
                <div className={style.interduce}>
                  <div className={`${style.BPMS} ${style.circleRight}`}>
                    <h2>BPMS</h2>
                    <p className="minimize forth">
                      Business Process Management System
                    </p>
                  </div>
                  <div className={style.AL}>
                    <h2>AL</h2>
                    <p className="minimize forth">Artificial Intelligence</p>
                  </div>
                  <div className={`${style.Others} ${style.circleRight}`}>
                    <h2>Others</h2>
                    <p className="minimize forth">
                      Other AdvancedAutomation Tools And Analytics
                    </p>
                  </div>
                  <div className={style.ML}>
                    <h2>ML</h2>
                    <p className="minimize forth">Machine Learning</p>
                  </div>
                </div>
                <div className={style.robotic}>
                  <div className={`${style.field} ${style.first}`}></div>
                  <div className={`${style.field} ${style.seconde}`}></div>
                  <div className={style.interduce}>
                    <span>Robotic Process Automation</span>
                  </div>
                  <div className={`${style.field} ${style.third}`}></div>
                  <div className={`${style.field} ${style.fourth}`}></div>
                </div>
              </div>
            </div>

            <div className="customer">
              <div className={style.title}>
                <h1 className="icon triAngleIcon txtPrimary">مشتریان</h1>
                <h1 className="txtSecondPrimary">{data?.company_name}</h1>
              </div>
              <Slider {...settings}>
                {customerSlider?.map((el) => {
                  return (
                    <Link
                      key={`customer-${el.WorkflowID}-${el.ValueP1162S1754StageID}`}
                      className={style.customerBrand}
                      href={el.website}
                      target="_blank"
                    >
                      <Image src={firstCustomer} alt="brand" priority={true} />
                    </Link>
                  );
                })}
                {/* <Link
                  className={style.customerBrand}
                  href="https://smdpcb.ir/"
                  target="_blank"
                >
                  <Image src={firstCustomer} alt="brand" priority={true} />
                </Link>
                <Link
                  className={style.customerBrand}
                  href="http://mojntco.ir/"
                  target="_blank"
                >
                  <Image src={Customer2} alt="brand" priority={true} />
                </Link>
                <Link
                  className={style.customerBrand}
                  href="http://hyper.deniklaser.ir/"
                  target="_blank"
                >
                  <Image src={denik} alt="brand" priority={true} />
                </Link>
                <Link
                  className={style.customerBrand}
                  href="http://betonbs.com/"
                  target="_blank"
                >
                  <Image src={boton} alt="brand" priority={true} />
                </Link> */}
              </Slider>
            </div>

            <div className={style.whatIsSepehrdata}>
              <div className={style.title}>
                <h1 className="icon triAngleIcon txtSecondPrimary">
                  {data?.company_name}
                </h1>
                <h1 className="txtPrimary">چیست؟</h1>
              </div>
              <div className={style.sepehrDesc}>
                <p>
                  هم اکنون شرکت داده کاوی سپهر توس بعد از پذیرش در{" "}
                  <span className="special">پارک علم و فناوری خراسان</span> حول
                  محصولات <span className="special">مبتنی بر هوش مصنوعی</span>{" "}
                  مشغول به فعالیت می باشد.
                </p>
              </div>
            </div>
            <Footer token={authtoken} data={data} />
          </div>
        </div>
      </div>
      <div className={`backward ${backwardStatus ? "show" : ""}`}></div>
    </>
  );
};

export default MainClient;