import React from 'react'
import ReactDOMServer from 'react-dom/server'
import { CardBody, Button, CardFooter } from 'reactstrap'
// import { Button as Button2 } from 'primereact/button'
// import { Skeleton } from 'primereact/skeleton'
import { Circle, CornerUpRight } 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'
export default function ComponentPopUpNpwp(props) {
  // const content = props
  // const content = data.features[0].properties
  //   {
  //     "alamat": "Jl. Peta Selatan Blok Pasar Kalideres No. 65",
  //     "nm_kpp_zona": "KPP Pratama Jakarta Kalideres",
  //     "nm_kantor_pengampu": "KPP Pratama Jakarta Kalideres",
  //     "nm_perekam": "MUHAMMAD HILAL BASHORI",
  //     "nm_kpp_perekam": "KPP Pratama Jakarta Jatinegara",
  //     "nama_ar_mfwp": "NOVI PRIYANTI",
  //     "jns_wp_mfwp": "OP NON KARYAWAN",
  //     "status_wp_mfwp": "NORMAL",
  //     "warna_pembayaran_thn_terakhir": "BLACK",
  //     "status_spt_tahunan_terakhir": "0",
  //     "merk_usaha": null,
  //     "no_telp": "085640474272",
  //     "creation_date": "26-JUL-24 09.18.25.000000 AM",
  //     "nama_ar_zona": "ADHITYA PRIMADHA ANDI"
  // }
  const ElementReact = () => {
    const petaStore = store.getState().peta
    // console.log(petaStore)
    return (
      <>
        <input type="hidden" id="uuid" value={props.UUID} />
        <div width={'200px'}>
          <div style={{ width: '262px', height: '104px', overflow: 'hidden' }} className="mb-1 flex center-block border">
            <img alt="" src={noImage} style={{ maxWidth: 'inherit', maxHeight: 'inherit', height: '100px', width: 'inherit', objectFit: 'contain' }} />
          </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"> {props.NAMA}</h5>
              <h6 className="poi-name text-primary fw-bolder cursor-pointer"> {props.npwp}</h6>
            </div>
            <div style={{ width: '64px' }} className="d-flex justify-content-end 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="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">Merk:</span>
                <span className="text-right">{props.merk_usaha ?? '-'}</span>
              </li>
              <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">Kontak:</span>
                <span className="text-right">{props.no_telp}</span>
              </li>
              <hr className="m-25" />
              <li className="mb-25  d-flex justify-content-between">
                <span className="fw-bolder mr-1">Zona:</span>
                <span className="text-right">
                  {props.nm_kpp_zona} - {props.nama_ar_zona}
                </span>
              </li>
              {props.npwp === null ? null : (
                <li className="mb-25  d-flex justify-content-between">
                  <span className="fw-bolder mr-1">Pengampu:</span>
                  <span className="text-right">
                    {props.nm_kantor_pengampu} - {props.nama_ar_mfwp}
                  </span>
                </li>
              )}
              <li className="mb-25  d-flex justify-content-between">
                <span className="fw-bolder mr-1">Perekam:</span>
                <span className="text-right">
                  {props.nm_kpp_perekam} - {props.nm_perekam} ({dayjs(props.creation_date).format('YYYY-MM-DD')})
                </span>
              </li>
              <hr className="m-25" />
              {props.npwp === null ? null : (
                <>
                  <li className="mb-25  d-flex justify-content-between">
                    <span className="fw-bolder mr-1">Jenis / Status WP:</span>
                    <span className="text-right">
                      {props.jns_wp_mfwp} / {props.status_wp_mfwp}{' '}
                    </span>
                  </li>
                  <li className="mb-25 mt-25  d-flex justify-content-between  align-middle">
                    <span className="fw-bolder mr-1">Tematik Pembayaran:</span>
                    <span className="text-right">
                      <>
                        <span className="mr-50">{petaStore.warnaBayar[props.warna_pembayaran_thn_terakhir].info}</span>
                        <Circle
                          fontSize={'1.5rem'}
                          fill={petaStore.warnaBayar[props.warna_pembayaran_thn_terakhir].warna}
                          color={petaStore.warnaBayar[props.warna_pembayaran_thn_terakhir].warna}
                        />
                      </>
                    </span>
                  </li>
                  <li className="mb-25 mt-25  d-flex justify-content-between  align-middle">
                    <span className="fw-bolder mr-1">Tematik Pelaporan SPT:</span>
                    <span className="text-right">
                      <>
                        <span className="mr-50">{petaStore.statusSPT[props.status_spt_tahunan_terakhir][0].KETERANGAN}</span>
                        {/* <Circle
                      fontSize={'1.5rem'}
                      fill={petaStore.warnaBayar[props.warna_pembayaran_thn_terakhir.toLowerCase()].warna}
                      color={petaStore.warnaBayar[props.warna_pembayaran_thn_terakhir.toLowerCase()].warna}
                    /> */}
                      </>
                    </span>
                  </li>
                </>
              )}
            </ul>
          </div>

          <div style={{ width: '100%' }}>{/* <div className="">Kategori : {content.NAMA}</div> */}</div>
          <div className="arah2" id="arah2"></div>
          <CardFooter className="p-0 pt-1 text-right flex justify-content-between align-items-center">
            <Button className="detail-box" outline color="primary" size="sm" title="Tutup tampilan" disabled>
              {/* <Shortcut style={{ transform: 'scaleX(-1)' }} /> */}
              <span className="align-middle ms-25 ">Detail </span>
            </Button>
            <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>
  )
}

// export default ComponentPopUpNpwp