import { LocationCard, SeparatorWithAnchor } from '../../components';
import popular from '../../datas/popular.json';
import './style.css';
import { useHome } from './useHome';
import { User } from 'lucide-react';

function Home() {
  const {
    recentLocations,
    topCriticsLocations,
    topUsersLocations,
    onNavigateToDetail,
  } = useHome();
  return (
    <div className="content main-content mt-3">

      {/* RECENTLY ADDED SECTION */}
      <section about={"Recently added places"} className={'mt-3'}>
        <SeparatorWithAnchor pageLink='#' pageName='recently added' secondLink='#' />
        {recentLocations.map((x) => (
          <LocationCard 
            containerClass='recently-added-section-card'
            onCardClick={onNavigateToDetail}
            data={x}
          />
          // <div className={"recently-added-section-card"}>
          //   <a onClick={() => onNavigateToDetail(x.id)}>
          //     <div className={'border-secondary recently-img-container'}>
          //       <img alt={x.name} src={x.thumbnail ? x.thumbnail : ''} loading="lazy" style={{ width: '100%', height: '100%' }} />
          //     </div>
          //   </a>
          //   <div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
          //     <p className={'location-title'}>{x.name}</p>
          //     <p className={'text-xs mt-1'}>{x.regency_name}, {x.province_name}</p>
          //   </div>
          //   {x.critic_count !== 0 &&
          //     <div className={"flex flex-row items-center mb-3"}>
          //       <div className={'mr-3 users-score-bar'}>
          //         <p className={'text-sm text-center'}>{x.critic_score}</p>
          //         <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
          //           <div style={{ height: 4, width: `${x.critic_score}%`, backgroundColor: 'green' }} />
          //         </div>
          //       </div>
          //       <p className={"users-score"}>critic score ({x.critic_count})</p>
          //     </div>
          //   }
          //   {x.user_score !== 0 &&
          //     <div className={"flex flex-row items-center"}>
          //       <div className={'mr-3 users-score-bar'}>
          //         <p className={'text-sm text-center'}>{x.user_score}</p>
          //         <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
          //           <div style={{ height: 4, width: ` ${x.user_score}%`, backgroundColor: 'green' }} />
          //         </div>
          //       </div>
          //       <p className={'users-score'}>user score ({x.user_count})</p>
          //     </div>
          //   }
          // </div>
        ))}
      </section>
      {/* END RECENTLY ADDED SECTION */}

      {/* START RECENT NEWS / EVENT SECTION */}
      {/* USE OPEN GRAPH PARSER TO READ OG DATA FROM HTML */}
      {/* https://github.com/dyatlov/go-opengraph */}
      {/* <section className={"mt-10"}>
        <SeparatorWithAnchor pageLink='#' pageName='Recent News / Event' secondLink='#' />
        <div className={"mt-5"}>
          {news.data.map((x: News) => (
            <div class={"text-sm news-card"}>
              <div className={"image-news-container"}>
                <img src={x.thumbnail} loading={'lazy'} className={"news-img"} />
              </div>
              <a className={'news-link'} target="_blank" href={x.link}>{x.link.split("/")[2].replace(/www\./, '')}</a>
              <p className={'mt-2 mb-2'}>{x.header}</p>
              <div className={"flex flex-row user-engagement"}>
                <svg xmlns="http://www.w3.org/2000/svg" fill={"gray"} height="18" viewBox="0 -960 960 960" width="18"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z" /></svg>
                <p className={"mr-3 ml-1"}>{x.likes_count}</p>
                <svg style={{ marginTop: 2 }} stroke="currentColor" fill="white" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32zM128 272c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>
                <p className={"ml-1"}>{x.comments_count}</p>
              </div>
            </div>
          ))
          }
        </div>
      </section> */}
      {/* END RECENT NEWS / EVENT SECTION */}

      {/* LOCATION CRITICS BEST AND USERS BEST SECTION  */}

      {/* <section className={"mt-10"}>
        <SeparatorWithAnchor pageLink='#' pageName={"Popular user reviews"} secondLink='#' />
        <div>
          {popular_user_review.data.map((x) => (
            <div className={'text-sm reviews-container'}>
              <div style={{ float: 'left', width: 120, margin: '0 12px 10px 0' }}>
                <img src={x.thumbnail} loading={'lazy'} style={{ width: '100%' }} />
              </div>
              <p className={"text-sm location-titles"}>{x.place_name}</p>
              <p className={'text-xs mb-2'}>{x.location}</p>
              <p className={'text-sm'}>{x.username}</p>
              <div style={{ display: 'inline-block', overflow: 'hidden', verticalAlign: 'middle' }}>
                <p className={'text-xs ml-2 mt-1'}>{x.rating}</p>
                <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
                  <div style={{ height: 4, width: `${x.rating}%`, backgroundColor: 'green' }} />
                </div>
              </div>
              <div style={{ clear: 'both' }} className={'mb-3'} />
              <div className={'text-sm'}>
                {x.message}
                <a className={'text-tertiary ml-2'} style={{ cursor: 'pointer' }}>read more</a>
              </div>
            </div>
          ))

          }
        </div>
      </section> */}


      {/* START LOCATION CRITICS BEST AND USERS BEST SECTION */}
      <section className={"mt-10 mb-10"}>
        <div class={"grid grid-cols-4 lg:gap-12"}>
          <div className={'col-span-4 lg:col-span-2 trending-section'}>
            <SeparatorWithAnchor pageLink='#' pageName={"trending this month"}/>
            <div className={'grid grid-cols-4 md:grid-cols-3'}>
              {popular.data.map((x) => (
                <div className={"m-2 text-sm col-span-2 md:col-span-1"}>
                  <div className={"mb-2 trending-image-container"}>
                    <img 
                      src={x.thumbnail} 
                      loading={"lazy"} 
                      style={{ width: '100%', height: '100%' }} 
                      onError={(e) => {
                        e.currentTarget.src = 'https://pub-6b637ea51b64436dbf0514bc956972d1.r2.dev/public/upload/misty-forest-black-white.webp';
                        e.currentTarget.onerror = null;
                      }}
                      />
                  </div >
                  <p className={"location-title"}>{x.name}</p>
                  <p className={"text-xs location-title"}>{x.location}</p>
                  <p className={"text-xs location-title"}>1.2k users visit this month</p>
                  <div>

                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className={'col-span-2 lg:col-span-1'}>
            <SeparatorWithAnchor pageLink='#' pageName={"2026 Critic's Best"} />
            {topCriticsLocations.map((x) => (
              <div className={"pt-2 text-sm top-location-container"}>
                <div className={'mr-2 critics-users-image'}>
                  <img
                    src={x.thumbnail}
                    loading={'lazy'}
                    style={{ height: '100%', width: '100%', borderRadius: 3 }}
                    onError={(e) => {
                      e.currentTarget.src = x.location_type === 'culinary' ? 'https://pub-6b637ea51b64436dbf0514bc956972d1.r2.dev/restaorunta.webp' : 'https://pub-6b637ea51b64436dbf0514bc956972d1.r2.dev/public/upload/misty-forest-black-white.webp';
                      e.currentTarget.onerror = null;
                    }}
                  />
                </div>
                <p className={'location-title'}>{x.name}</p>
                <p className={'text-xs location-province location-title'}>{x.regency_name}</p>
                <div className={'flex items-center gam-1 mt-2'}>
                  <div>
                    <p className={'text-md text-center'}>{x.critic_score}</p>
                    <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
                      <div style={{ height: 4, width: `${x.critic_score}%`, backgroundColor: 'green' }} />
                    </div>
                  </div>
                  <span className={'ml-2 text-gray text-sm flex items-center gap-1'}>({x.critic_count} <User size={16} />)</span>
                </div>
                <div style={{ clear: 'both' }} />
              </div>
            ))
            }
          </div>
          <div className={'col-span-2 lg:col-span-1'}>
            <SeparatorWithAnchor pageLink='#' pageName={"2026 User's Best"} />
            {topUsersLocations.map((x) => (
              <div className={"pt-2 text-sm top-location-container"}>
                <div className={'mr-2 critics-users-image'}>
                  <img
                    src={x.thumbnail}
                    loading={'lazy'}
                    style={{ height: '100%', width: '100%', borderRadius: 3 }}
                    onError={(e) => {
                      e.currentTarget.src = x.location_type === 'culinary' ? 'https://pub-6b637ea51b64436dbf0514bc956972d1.r2.dev/restaorunta.webp' : 'https://pub-6b637ea51b64436dbf0514bc956972d1.r2.dev/public/upload/misty-forest-black-white.webp';
                      e.currentTarget.onerror = null;
                    }}
                  />
                </div>
                <p className={'location-title'}>{x.name}</p>
                <p className={'text-xs location-province location-title'}>{x.regency_name}</p>
                <div className={'flex items-center gap-1 mt-2'}>
                  <div>
                    <p className={'text-sm text-center'}>{x.user_score}</p>
                    <div style={{ height: 4, width: 30, backgroundColor: "#72767d" }}>
                      <div style={{ height: 4, width: `${x.user_score}%`, backgroundColor: 'green' }} />
                    </div>
                  </div>
                  <span className={'ml-2 text-gray text-sm flex items-center gap-1'}>({x.user_count} <User size={16} /> )</span>
                </div>
                <div style={{ clear: 'both' }} />
              </div>
            ))
            }
          </div>
        </div>
      </section>
    </div>

  )
}

export default Home;