import { useLocation, useParams } from 'react-router-dom';
import { ChangeEvent, TargetedEvent } from 'preact/compat';
import { useEffect, useRef, useState } from 'preact/hooks';
import './index.css';
import Lightbox from 'yet-another-react-lightbox';
import useCallbackState from '../../types/state-callback';
import { EmptyLocationDetailResponse, LocationDetailResponse, LocationResponse, emptyLocationResponse } from './types';
import { useAutosizeTextArea } from '../../utils';
import { getImagesByLocationService, getLocationService } from "../../services";
import { DefaultSeparator, SeparatorWithAnchor } from '../../components';

function LocationDetail() {
  const [locationDetail, setLocationDetail] = useCallbackState<LocationDetailResponse>(EmptyLocationDetailResponse)
  const [locationImages, setLocationImages] = useState<LocationResponse>(emptyLocationResponse())
  const [lightboxOpen, setLightboxOpen] = useState<boolean>(false)
  const [pageState, setPageState] = useState({
    critic_filter_name: 'highest rated',
    critic_filter_type: 0,
    show_sort: false
  })
  const [reviewValue, setReviewValue] = useState({
    review_textArea: '',
    score_input: '',
  })
  const [isLoading, setIsLoading] = useState<boolean>(true)


  const textAreaRef = useRef<HTMLTextAreaElement>(null);
  useAutosizeTextArea(textAreaRef.current, reviewValue.review_textArea);

  const { state } = useLocation();
  const { id } = useParams()

  const SORT_TYPE = [
    'highest rated',
    'lowest rated',
    'newest',
    'oldest'
  ]

  async function getLocationDetail(): Promise<void> {
    try {
      const res = await getLocationService(Number(id))
      setLocationDetail(res.data, (val) => {
        getImage(val.detail.thumbnail.String.toString())
      })
    } catch (err) {
      console.log(err)
    }
  }

  async function getImage(thumbnail?: String): Promise<void> {
    try {
      const res = await getImagesByLocationService({ page: 1, page_size: 15, location_id: Number(id) })
      res.data.images.push({ src: thumbnail })
      setLocationImages(res.data)
    } catch (error) {
      console.log(error)
    }
    setIsLoading(false)
  }

  function handleTextAreaChange(e: ChangeEvent<HTMLTextAreaElement>): void {
    const val = e.target as HTMLTextAreaElement;

    setReviewValue({
      ...reviewValue,
      review_textArea: val.value
    })
  }

  function handleScoreInputChange(e: ChangeEvent<HTMLInputElement>): void {
    const val = e.target as HTMLInputElement;

    setReviewValue({
      ...reviewValue,
      score_input: val.value
    })
  }

  function onChangeCriticsSort(e: TargetedEvent<HTMLAnchorElement>, sort_name: string, sort_type: number): void {
    e.preventDefault()
    setPageState({ show_sort: false, critic_filter_name: sort_name, critic_filter_type: sort_type })
  }

  useEffect(() => {
    getLocationDetail()
  }, [])

  return (
    <>
      <div className={'content main-content mt-3'}>
        <section name={"HEADER LINK"}>
          <div className={'header-link text-tertiary'}>
            <a style={{ display: 'inline-block' }}>OVERVIEW</a>
            <a className={'ml-4'} style={{ display: 'inline-block' }}>USER REVIEWS</a>
            <a className={'ml-4'} style={{ display: 'inline-block' }}>CRITIC REVIEWS</a>
            <a className={'ml-4'} style={{ display: 'inline-block' }}>COMMENTS</a>
          </div>
        </section>

        <section name={'LOCATION HEADER'}>
          <div className={'pb-5'} style={{ borderBottom: '1px solid #38444d' }}>
            <div className={'font-bold mt-5 text-2xl'}>
              <h1>{locationDetail?.detail.name}</h1>
            </div>
            {isLoading ?
              <div className={'mt-3'} style={{ width: 250, height: 250, backgroundColor: 'gray', float: 'left' }} />
              :
              <div className={'inline-block'} style={{ maxWidth: 320 }}>
                <a
                  onClick={() => setLightboxOpen(true)}
                  className={'mt-3'}
                  style={{ display: 'grid', position: 'relative', gridTemplateColumns: 'repeat(12,1fr)', cursor: 'zoom-in' }}
                >{Number(locationImages?.total_image) > 0 &&
                  <div class="image-stack__item image-stack__item--top">
                    <img src={locationDetail.detail.thumbnail.String.toString()} alt="" style={{ aspectRatio: '1/1' }} />
                    {locationImages?.images.length > 1 &&
                      <div className={'text-xs p-2 bg-primary'} style={{ position: 'absolute', bottom: 0, right: 0 }}>
                        Total images ({locationImages?.images.length})
                      </div>
                    }
                  </div>
                  }
                  {locationImages?.images.length > 1 &&
                    <div class="image-stack__item image-stack__item--middle">
                      <img src={locationImages?.images[0].src} alt="" style={{ aspectRatio: '1/1' }} />
                    </div>
                  }
                  <div class="image-stack__item image-stack__item--bottom" style={Number(locationImages?.total_image) > 1 ? {} : { gridColumn: '13/1' }}>
                    <img src={Number(locationImages?.total_image) > 1 ? locationImages?.images[1].src.toString() : locationDetail.detail.thumbnail.String.toString()} alt="" style={{ aspectRatio: '1/1' }} />
                  </div>
                </a>
              </div>
            }
            <div className={'inline-block'} style={{ verticalAlign: 'top', padding: '0 2%', width: '30%', minWidth: 310 }}>
              <div className={'p-4 bg-secondary mt-3'} style={{ width: '100%', height: 120, borderTopLeftRadius: 10, borderTopRightRadius: 10 }}>
                <div className={'font-bold ml-1 text-xs'}>CRITICS SCORE</div>
                <div className={'text-4xl text-center mt-2 mr-4'} style={{ width: 95, float: 'left' }}>
                  {state.critic_count !== 0 ? state.critic_score : "NR"}
                  <div className={"items-center p-2"}>
                    <div className={'mr-3 users-score-bar'}>
                      <div className={"mt-1"} style={{ height: 4, width: 80, backgroundColor: "#72767d" }}>
                        <div style={{ height: 4, width: ` ${state.critic_count !== 0 ? Number(state.critic_score) / Number(state.critic_count) * 10 : 0}%`, backgroundColor: 'green' }} />
                      </div>
                    </div>
                  </div>
                </div>
                {state.critic_count !== 0 &&
                  <div className={'ml-14 text-sm'}>
                    Based on {state.critic_count} reviews
                  </div>
                }
              </div>
              <div className={'p-4 bg-secondary mt-1 inline-block'} style={{ width: '100%', height: 120, borderBottomLeftRadius: 10, borderBottomRightRadius: 10 }}>
                <div className={'font-bold ml-2 text-xs'}>USERS SCORE</div>
                <div className={'text-4xl text-center mt-2'} style={{ width: 95, float: 'left' }}>
                  {state.user_count !== 0 ? state.user_score : "NR"}
                  <div className={"items-center p-2"}>
                    <div className={'mr-3 users-score-bar'}>
                      <div className={"mt-1"} style={{ height: 4, width: 80, backgroundColor: "#72767d" }}>
                        <div style={{ height: 4, width: ` ${state.user_count !== 0 ? Number(state.user_score) / Number(state.user_score) * 10 : 0}%`, backgroundColor: 'green' }} />
                      </div>
                    </div>
                  </div>
                </div>
                {state.user_count !== 0 &&
                  <div className={'ml-4'}>
                    Based on {state.user_count} reviews
                  </div>
                }
              </div>
            </div>
            <div className={'inline-block mt-3 bg-primary text-sm location-detail-container'}>
              <div className={'pb-1'} style={{ borderBottom: '1px solid #38444d' }}>
                <h2 className={'inline-block font-bold text-xs'} style={{ letterSpacing: .9 }}>DETAILS</h2>
                <div className={''} style={{ float: 'right', fontSize: 10, letterSpacing: .9 }}>
                  <a href="#">SUBMIT CORRECTION</a>
                </div>
              </div>
              <div className={'mt-2 capitalize'}>
                <span>address: </span> {locationDetail.detail.address} {locationDetail.detail.regency_name}
              </div>
              <div className={'mt-1 capitalize'}>
                <span>province: </span> <a href={'#'}> {locationDetail.detail.province_name}</a>
              </div>
              <div className={'mt-1 capitalize'}>
                <span>region: </span> <a href={'#'}> {locationDetail.detail.region_name}</a>
              </div>
              <div className={'mt-1 capitalize'}>
                <span>average cost: </span> IDR 25.0000
              </div>
              <div className={'mt-1 text-md'}>
                <a href={locationDetail.detail.google_maps_link.toString()} style={{ borderBottom: '1px solid white' }} target={'_'}> Maps Location</a>
              </div>
              <div className={'mt-1'}>
                <span>Tags: </span>
              </div>
              {locationDetail.tags.map(x => (
                <div className={'p-1 text-xs tags-box mr-1'}>
                  <a href={'#'}>{x}</a>
                </div>
              ))
              }
              <div className={'p-1 text-xs tags-box'}>
                <a href={'#'}>+ add tags</a>
              </div>
            </div>
          </div>
        </section>

        <section name={'REVIEWS SECTION'}>
          <div className={'mt-5'} style={{ tableLayout: 'fixed', display: 'table', width: '100%' }}>
            <div className={'wideLeft'} style={{ textAlign: 'left', paddingRight: 20, maxWidth: 1096, minWidth: 680, display: 'table-cell', position: 'relative', verticalAlign: 'top', width: '100%', boxSizing: 'border-box' }}>

              {/* <div className={'bg-secondary text-center p-3'} style={{ width: '100%'}}><a href={'#'}>SIGN IN</a> TO REVIEW</div> */}
              <div name="REVIEW INPUT TEXTAREA" className={'reviewContainer p-4'} style={{ backgroundColor: '#2f3136' }}>
                <div className={'reviewBoxContent'} style={{ width: '75%', margin: '0 auto' }}>

                  <div className={'userImage mr-3'} style={{ width: 55, float: 'left' }}>
                    <a href={'#'}>
                      <img loading={'lazy'} src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'} />
                    </a>
                  </div>

                  <div style={{ display: 'block' }}>
                    <a href={'#'}>user</a>
                  </div>

                  <div className={'ratingInput'} style={{ margin: '5px 0 10px' }}>
                    <div style={{ float: 'left' }}>
                      <input
                        type={'text'}
                        pattern={"\d*"}
                        style={{ fontSize: 12, backgroundColor: '#40444b', textAlign: 'center', width: 40, height: 20, lineHeight: 18, border: '1px solid #38444d' }}
                        maxLength={3}
                        value={reviewValue.score_input}
                        onChange={handleScoreInputChange}
                        placeholder={"0-100"}
                        autoComplete={'off'}
                      />
                      <div className={'inline-block text-xs ml-2 text-tertiary'}>/ score</div>
                    </div>
                    <div style={{ clear: 'both' }} />
                  </div>

                  <div className={'mt-3'} style={{ width: '100%' }}>
                    <textarea
                      onChange={handleTextAreaChange}
                      ref={textAreaRef}
                      className={'p-2'}
                      value={reviewValue.review_textArea}
                      style={{ border: 'none', overflow: 'auto', outline: 'none', boxShadow: 'none', backgroundColor: '#40444b', width: '100%', minHeight: 100, overflowY: 'hidden' }}
                    />
                  </div>

                  <div style={{ textAlign: 'right', width: "100%" }}>
                    <div style={{ display: 'inline-block', fontSize: 11, verticalAlign: 'middle', margin: '0 10px 0 0', letterSpacing: .5 }}>
                      <a>Review Guidelines</a>
                    </div>
                    <span className={'text-xxs p-1'} style={{ backgroundColor: 'gray', letterSpacing: 1 }}>
                      <a href={'#'}>
                        POST
                      </a>
                    </span>
                  </div>
                </div>
              </div>

              <div name={'CRTICITS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
                <SeparatorWithAnchor pageName={"critic's review"} pageLink='#' />
                <div className={'criticSortFilter'}>
                  <div className={'inline-block text-sm'}>Sort by: </div>
                  <a className={'dropdownLabel'} onClick={() => setPageState({ ...pageState, show_sort: !pageState.show_sort })}>
                    <p className={'ml-2 inline-block capitalize text-sm'}>{pageState.critic_filter_name}</p>
                    <svg style={{ display: 'inline-block' }} fill={"currentColor"} xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z" /></svg>
                  </a>
                  <div className={'dropdown-content text-sm bg-secondary'} style={pageState.show_sort ? { display: 'block' } : ''}>
                    {SORT_TYPE.map((x, index) => (
                      <a onClick={(e) => onChangeCriticsSort(e, x, index)} className={'block pt-1 capitalize'}>{x}</a>
                    ))}
                  </div>
                </div>
                <div style={{ clear: 'both' }} />

                <div className={''} style={{ padding: '15px 0' }}>
                  <div style={{ float: 'left' }}>
                    <div style={{ fontSize: 20, marginRight: 20, textAlign: 'center', width: 55, marginBottom: 3 }}>
                      90
                    </div>
                    <div style={{ height: 4, width: 55, position: 'relative', backgroundColor: '#d8d8d8' }}>
                      <div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
                    </div>
                  </div>
                  <div className={'mr-3'} style={{ display: 'inline-block', width: 40 }}>
                    <a href="#">
                      <img
                        loading={'lazy'}
                        style={{ width: '100%' }}
                        src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
                      />
                    </a>
                  </div>
                  <div style={{ display: 'inline-block', verticalAlign: 'top' }}>
                    <div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
                      <a>
                        <span>Benito Mussolini</span>
                      </a>
                    </div>
                  </div>
                  <div style={{ fontSize: 15, lineHeight: '24px', margin: '5px 75px 1px', wordWrap: 'break-word' }}>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil dolor delectus ex minima aliquid quidem veniam officiis temporibus ipsum ea incidunt voluptatum a, repellat illum, cumque consequatur saepe assumenda.</p>
                  </div>
                  <div className={'reviewLinks'} style={{ marginLeft: 72 }}>
                    <div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Video</div>
                      </a>
                    </div>
                    <div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Instagram</div>
                      </a>
                    </div>
                  </div>
                </div>

                <div className={''} style={{ padding: '15px 0', borderTop: '1px solid #38444d' }}>
                  <div style={{ float: 'left' }}>
                    <div style={{ fontSize: 20, marginRight: 20, textAlign: 'center', width: 55, marginBottom: 3 }}>
                      90
                    </div>
                    <div style={{ height: 4, width: 55, position: 'relative', backgroundColor: '#d8d8d8' }}>
                      <div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
                    </div>
                  </div>
                  <div className={'mr-3'} style={{ display: 'inline-block', width: 40 }}>
                    <a href="#">
                      <img
                        loading={'lazy'}
                        style={{ width: '100%' }}
                        src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
                      />
                    </a>
                  </div>
                  <div style={{ display: 'inline-block', verticalAlign: 'top' }}>
                    <div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
                      <a>
                        <span>Benito Mussolini</span>
                      </a>
                    </div>
                  </div>
                  <div style={{ fontSize: 15, lineHeight: '24px', margin: '5px 75px 1px', wordWrap: 'break-word' }}>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil dolor delectus ex minima aliquid quidem veniam officiis temporibus ipsum ea incidunt voluptatum a, repellat illum, cumque consequatur saepe assumenda.</p>
                  </div>
                  <div className={'reviewLinks'} style={{ marginLeft: 72 }}>
                    <div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Video</div>
                      </a>
                    </div>
                    <div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Instagram</div>
                      </a>
                    </div>
                  </div>
                </div>
                <div className={''} style={{ padding: '15px 0', borderTop: '1px solid #38444d' }}>
                  <div style={{ float: 'left' }}>
                    <div style={{ fontSize: 20, marginRight: 20, textAlign: 'center', width: 55, marginBottom: 3 }}>
                      90
                    </div>
                    <div style={{ height: 4, width: 55, position: 'relative', backgroundColor: '#d8d8d8' }}>
                      <div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
                    </div>
                  </div>
                  <div className={'mr-3'} style={{ display: 'inline-block', width: 40 }}>
                    <a href="#">
                      <img
                        loading={'lazy'}
                        style={{ width: '100%' }}
                        src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
                      />
                    </a>
                  </div>
                  <div style={{ display: 'inline-block', verticalAlign: 'top' }}>
                    <div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
                      <a>
                        <span>Benito Mussolini</span>
                      </a>
                    </div>
                  </div>
                  <div style={{ fontSize: 15, lineHeight: '24px', margin: '5px 75px 1px', wordWrap: 'break-word' }}>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil dolor delectus ex minima aliquid quidem veniam officiis temporibus ipsum ea incidunt voluptatum a, repellat illum, cumque consequatur saepe assumenda.</p>
                  </div>
                  <div className={'reviewLinks'} style={{ marginLeft: 72 }}>
                    <div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Video</div>
                      </a>
                    </div>
                    <div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Instagram</div>
                      </a>
                    </div>
                  </div>
                </div>

              </div>

              <div name={'USERS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
                <SeparatorWithAnchor pageName={"Popular User's review"} pageLink='#' secondLink='#'/>

                <div className={''} style={{ padding: '15px 0' }}>
                  <div className={'mr-5'} style={{ width: 45, float: 'left' }}>
                    <a href="#">
                      <img
                        loading={'lazy'}
                        style={{ width: '100%' }}
                        src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
                      />
                    </a>
                  </div>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
                      <a>
                        <span>Benito Mussolini</span>
                      </a>
                    </div>
                  </div>
                  <div className={'inline-block'}>
                    <div className={'text-sm text-center'} >80</div>
                    <div style={{ height: 4, width: 25, position: 'relative', backgroundColor: '#d8d8d8' }}>
                      <div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
                    </div>
                  </div>
                  <div style={{ fontSize: 15, lineHeight: '24px', margin: '10px 65px 1px', wordWrap: 'break-word' }}>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil dolor delectus ex minima aliquid quidem veniam officiis temporibus ipsum ea incidunt voluptatum a, repellat illum, cumque consequatur saepe assumenda.</p>
                  </div>
                  <div className={'reviewLinks'} style={{ marginLeft: 63 }}>
                    <div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Video</div>
                      </a>
                    </div>
                    <div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Instagram</div>
                      </a>
                    </div>
                  </div>
                </div>

                <div className={''} style={{ padding: '15px 0', borderTop: '1px solid #38444d' }}>
                  <div className={'mr-5'} style={{ width: 45, float: 'left' }}>
                    <a href="#">
                      <img
                        loading={'lazy'}
                        style={{ width: '100%' }}
                        src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
                      />
                    </a>
                  </div>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
                      <a>
                        <span>Benito Mussolini</span>
                      </a>
                    </div>
                  </div>
                  <div className={'inline-block'}>
                    <div className={'text-sm text-center'} >80</div>
                    <div style={{ height: 4, width: 25, position: 'relative', backgroundColor: '#d8d8d8' }}>
                      <div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
                    </div>
                  </div>
                  <div style={{ fontSize: 15, lineHeight: '24px', margin: '10px 65px 1px', wordWrap: 'break-word' }}>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil dolor delectus ex minima aliquid quidem veniam officiis temporibus ipsum ea incidunt voluptatum a, repellat illum, cumque consequatur saepe assumenda.</p>
                  </div>
                  <div className={'reviewLinks'} style={{ marginLeft: 63 }}>
                    <div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Video</div>
                      </a>
                    </div>
                    <div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Instagram</div>
                      </a>
                    </div>
                  </div>
                </div>

                <div className={'review-more-button text-center text-sm mt-5'}>
                  <a style={{ borderRadius: 15, padding: '8px 32px', border: '1px solid #d8d8d8'}}>
                    More
                  </a>
                </div>
              </div>


              <div name={'USERS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
                <SeparatorWithAnchor pageName={"Recent User's review"} pageLink='#' secondLink='#'/>
                <div className={''} style={{ padding: '15px 0' }}>
                  <div className={'mr-5'} style={{ width: 45, float: 'left' }}>
                    <a href="#">
                      <img
                        loading={'lazy'}
                        style={{ width: '100%' }}
                        src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
                      />
                    </a>
                  </div>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
                      <a>
                        <span>Benito Mussolini</span>
                      </a>
                    </div>
                  </div>
                  <div className={'inline-block'}>
                    <div className={'text-sm text-center'} >80</div>
                    <div style={{ height: 4, width: 25, position: 'relative', backgroundColor: '#d8d8d8' }}>
                      <div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
                    </div>
                  </div>
                  <div style={{ fontSize: 15, lineHeight: '24px', margin: '10px 65px 1px', wordWrap: 'break-word' }}>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil dolor delectus ex minima aliquid quidem veniam officiis temporibus ipsum ea incidunt voluptatum a, repellat illum, cumque consequatur saepe assumenda.</p>
                  </div>
                  <div className={'reviewLinks'} style={{ marginLeft: 63 }}>
                    <div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Video</div>
                      </a>
                    </div>
                    <div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Instagram</div>
                      </a>
                    </div>
                  </div>
                </div>

                <div className={''} style={{ padding: '15px 0', borderTop: '1px solid #38444d' }}>
                  <div className={'mr-5'} style={{ width: 45, float: 'left' }}>
                    <a href="#">
                      <img
                        loading={'lazy'}
                        style={{ width: '100%' }}
                        src={'https://cdn.discordapp.com/attachments/743422487882104837/1153985664849805392/421-4212617_person-placeholder-image-transparent-hd-png-download.png'}
                      />
                    </a>
                  </div>
                  <div>
                    <div style={{ fontWeight: 700, fontSize: 16, lineHeight: 'initial' }}>
                      <a>
                        <span>Benito Mussolini</span>
                      </a>
                    </div>
                  </div>
                  <div className={'inline-block'}>
                    <div className={'text-sm text-center'} >80</div>
                    <div style={{ height: 4, width: 25, position: 'relative', backgroundColor: '#d8d8d8' }}>
                      <div style={{ height: 4, backgroundColor: '#85ce73', width: '90%' }} />
                    </div>
                  </div>
                  <div style={{ fontSize: 15, lineHeight: '24px', margin: '10px 65px 1px', wordWrap: 'break-word' }}>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil dolor delectus ex minima aliquid quidem veniam officiis temporibus ipsum ea incidunt voluptatum a, repellat illum, cumque consequatur saepe assumenda.</p>
                  </div>
                  <div className={'reviewLinks'} style={{ marginLeft: 63 }}>
                    <div className={'mr-2'} style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Video</div>
                      </a>
                    </div>
                    <div style={{ minWidth: 55, display: 'inline-block', verticalAlign: 'middle' }}>
                      <a className={'text-sm'} href={'#'}>
                        <svg className={'inline-block mr-1'} fill={'currentColor'} xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 -960 960 960"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z" /></svg>
                        <div className={'inline-block'}>Instagram</div>
                      </a>
                    </div>
                  </div>
                </div>
                <div className={'review-more-button text-center text-sm mt-5'}>
                  <a style={{ borderRadius: 15, padding: '8px 32px', border: '1px solid #d8d8d8'}}>
                    More
                  </a>
                </div>
              </div>
              <div className={'mb-5'}>
                CONTRUBITION
                <DefaultSeparator />
                anoeantoeh aoenthaoe aoenth aot
              </div>
            </div>
            {screen.width >= 1024 &&
              <div className={'bg-secondary'} style={{ display: 'table-cell', position: 'relative', verticalAlign: 'top', width: 330, textAlign: 'left', padding: 15, boxSizing: 'border-box', height: 1080 }}>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit cumque aliquam doloribus in reiciendis? Laborum, ea assumenda, tempora dolore placeat aspernatur, cumque totam sequi debitis dolor nam eligendi suscipit aliquid?
              </div>
            }
          </div>
          <div style={{ clear: 'both'}} />
        </section>

        <section>
          <div className={'text-center text-md pt-5 pb-5'}>
            Added on: 28 May 1988
          </div>
        </section>
        <Lightbox
          open={lightboxOpen}
          close={() => setLightboxOpen(false)}
          slides={locationImages?.images}
        />
      </div>
    </>
  )
}

export default LocationDetail;