import { Image, Spin } from "antd";
import React from "react";
import SimpleMap from "./Map";
import {  useGetSetting } from "../../api/GuestApi";
import { TOKEN_KEY } from "../../api/config";
import useAuthState from "../../lib/statemangment/AuthState";
import ReactPlayer from 'react-player'
import { FaEdit } from "react-icons/fa";
import { useNavigate } from "react-router-dom";

const Page = () => {
  const navigate= useNavigate()
  const fake = "900310ff-610f-11ee-9fbc-00505649cf62";
  const { data, isLoading } = useGetSetting({
    show: fake,
  });
  console.log(data, "data");
  const {
    logo,
    name,
    address,
    contact_info,
    slogan,
    attributes,
    images,
    video,
    id

  } = data?.data ?? [];
  const fakeIMage = [1,1,1,1,1,1]
      const handel_navigate = (id:number)=>{
        console.log(id);
        
        
        navigate(`/Setting/${id}`)
      }
  if(isLoading){
    return <Spin/>
  }
  return (
    <div className="SettingPage">
      <header className="SettingPage_header">
        <Image
          width={200}
          src={logo}
          className="Personal_Image"
          fallback="/Layout/images.png"
        />
        <div>
          <h1>{name}</h1>
        </div>
      </header>
      {Object.entries(slogan).map(([key, value]:any, index) => {
          console.log(key, value);
          return (
            <h5 key={index}>
              {key} : {value}
            </h5>
          );
        })}
      <SimpleMap lat="51.505" long="-0.09" />
    
      <div>
        <h5> phone_number : {contact_info?.phone_number}</h5>
        <h5>email : {contact_info?.email}</h5>
        {Object.entries(attributes).map(([key, value]:any, index) => {
          console.log(key, value);
          return (
            <h5 key={index}>
              {key} : {value}
            </h5>
          );
        })}
      </div>
      <div className="Personal_Images">
          {images?.map((item:any,index:number)=>{
            return (
              <Image
              width={200}
              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
              className="Image"
            />
            )
          })}
      </div>
      {video && 
            <ReactPlayer controls url={video} />

      }

<div className="EditButton" >
        <FaEdit   onClick={()=> handel_navigate(id)}  size={30}/>
</div>
    </div>
  );
};

export default Page;
