import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { Card, CardBody, CardText, Button, Label, UncontrolledTooltip, Tooltip, CardFooter } from 'reactstrap'
// import { Button as Button2 } from 'primereact/button'
// import { Skeleton } from 'primereact/skeleton'
import { Bookmark, Circle, CornerUpRight, Star } from 'react-feather'
import { Divider } from 'primereact/divider'
import Rating from 'react-rating'
// import { numberFormat } from '@utils'
// import { Shortcut } from '@mui/icons-material'

import 'primereact/resources/themes/lara-light-indigo/theme.css' // theme
import 'primereact/resources/primereact.css' // core css
// import "primeicons/primeicons.css" // icons
import 'primeflex/primeflex.css'
import noImage from './noImage.png'
import dayjs from 'dayjs'
import { store } from '../../kytp/store/store'
import { Shortcut } from '@mui/icons-material'
export default function ComponentPopUpPoiGoogle(props) {
  const content = props
  // const content = data.features[0].properties
  //   {
  //     "id_data": "g_5029108_090",
  //     "nama": "Jasa isi Games Pc/Laptop",
  //     "alamat": "Jl. Pengadegan Selatan No.10,  RT.4/RW.5",
  //     "category": "Video game store",
  //     "nm_ar_zona": "ANNISA BALATIF",
  //     "nm_kantor": "KPP Pratama Jakarta Pancoran",
  //     "top_image_url": "https://lh5.googleusercontent.com/p/AF1QipPs4cUvbFaUeAnRx4zV-T543H4Ly3SoD3qh8NA=w426-h240-k-no",
  //     "adm1_en": "DKI Jakarta",
  //     "adm2_en": "Kota Administrasi Jakarta Selatan",
  //     "adm3_en": "Pancoran",
  //     "adm4_en": "Pengadegan",
  //     "rating": "4",
  //     "review": "4"
  // }
  const ElementReact = () => {
    const petaStore = store.getState().peta
    return (
      <>
        <div width={'200px'}>
          <div style={{ width: '262px', height: '104px', overflow: 'hidden' }} className="d-flex center-block ">
            <img
              alt=""
              src={content.top_image_url ?? noImage}
              style={{ maxWidth: 'inherit', maxHeight: 'inherit', height: '100px', width: 'inherit', objectFit: 'cover' }}
            />
          </div>

          <CardBody className="m-0 p-0 d-flex justify-content-around align-items-center">
            <div style={{ width: '190px' }}>
              <h5 className="poi-name text-primary fw-bolder cursor-pointer"> {content.nama}</h5>
            </div>
            <div style={{ width: '64px' }} className="d-flex justify-content-around text-end">
              <div className="arah">
                <Button className="btn-icon rounded-circle btn-sm" id="arah" color="primary">
                  <CornerUpRight size={14} />
                </Button>
              </div>
              {/* <Button className="btn-icon rounded-circle btn-sm" outline color="primary">
                <Bookmark size={14} />
              </Button> */}
            </div>
          </CardBody>

          <div className="flex mt-1">
            <Label className="">{Number(content.rating).toLocaleString('id-ID')}</Label>
            <Rating
              className="px-25"
              readonly
              initialRating={content.rating}
              direction={'ltr'}
              emptySymbol={<Star size={12} fill="#babfc7" stroke="#babfc7" />}
              fullSymbol={<Star size={12} fill="#ff9700" stroke="#ff9700" />}
            />
            <Label className="">({Number(content.review ?? 0)} ulasan)</Label>
          </div>
          <div style={{ width: '100%' }}>
            <div className="">Kategori : {content.category}</div>
          </div>
          <div className="arah2" id="arah2"></div>
          <div className="container-next-data my-50" id="container-next-data">
            <ul className="list-unstyled" style={{ width: '262px' }}>
              <li className="mb-25  d-flex justify-content-between">
                <span className="fw-bolder mr-1">Alamat:</span>
                <span className="text-right">{props.alamat}</span>
              </li>
              <li className="mb-25  d-flex justify-content-between">
                <span className="fw-bolder mr-1">Zona:</span>
                <span className="text-right">
                  {props.nm_kantor} - {props.nm_ar_zona}
                </span>
              </li>
            </ul>
          </div>
          <CardFooter className="pt-1 text-right">
            <Button className="tutup-box" outline color="primary" size="sm" title="Tutup tampilan">
              {/* <Shortcut style={{ transform: 'scaleX(-1)' }} /> */}
              <span className="align-middle ms-25">Tutup</span>
            </Button>
          </CardFooter>
        </div>
      </>
    )
  }
  return ReactDOMServer.renderToString(
    <div>
      <ElementReact />
    </div>
  )
}