import { useNavigate, useParams } from 'react-router-dom';
import { ChangeEvent, TargetedEvent } from 'preact/compat';
import { useEffect, useRef, useState } from 'preact/hooks';
import Lightbox from 'yet-another-react-lightbox';
import useCallbackState from '../../types/state-callback';
import { 
  EmptyLocationDetailResponse, 
  LocationDetailResponse, 
  LocationResponse, 
  emptyLocationResponse,
  CurrentUserLocationReviews,
} from './types';
import { AxiosError } from 'axios';
import { handleAxiosError, useAutosizeTextArea } from '../../utils';
import { getCurrentUserLocationReviewService, getImagesByLocationService, getLocationService, postReviewLocation } from "../../services";
import { DefaultSeparator, SeparatorWithAnchor, CustomInterweave, SpinnerLoading } from '../../components';
import { useSelector } from 'react-redux';
import { UserRootState } from '../../store/type';
import { DEFAULT_AVATAR_IMG } from '../../constants/default';
import './index.css';
import { IHttpResponse } from '../../types/common';
import ReactTextareaAutosize from 'react-textarea-autosize';

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

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

  const navigate = useNavigate();
  const user = useSelector((state: UserRootState) => state.auth)


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

  const { id } = useParams()

  async function getLocationDetail(): Promise<void> {
    try {
      const res = await getLocationService(Number(id))
      setLocationDetail(res.data, (val) => {
        getImage(val.detail.thumbnail.String.toString())
      })
    } catch (error) {
      let err = error as AxiosError;
      if (err.response?.status == 404) {
        navigate("/")
      }
      alert(error)
    }
  }

  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)
      setUpdatePage(false)
    } catch (error) {
      console.log(error)
    }
    setIsLoading(false)
  }

  async function getCurrentUserLocationReview(): Promise<void> {
   try {
    const res = await getCurrentUserLocationReviewService(Number(id))
    setCurrentUserReview(res.data)
    setPageState({ ...pageState, enable_post: false})
   } catch (error) {
    let err = error as IHttpResponse;
    if(err.status == 404 || err.status == 401 ) {
      return
    }
    alert(err.error.response.data.message)
   }
  }

  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
    })

    setPageState({
      ...pageState,
      is_score_rating_panic_msg: ''
    })
  }

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

  async function handleSubmitReview(e: TargetedEvent<HTMLAnchorElement>) {
    e.preventDefault();
    setPageState({ ...pageState, on_submit_loading: true })

    if (isNaN(Number(reviewValue.score_input))) {
      setPageState({ ...pageState, is_score_rating_panic_msg: "SCORE MUST BE A NUMBER" })
      return
    }

    if (Number(reviewValue.score_input) > 100) {
      setPageState({ ...pageState, is_score_rating_panic_msg: "SCORE MUST BE LESS OR EQUAL THAN 100" })
      return
    }

    if (reviewValue.score_input === '') {
      setPageState({ ...pageState, is_score_rating_panic_msg: "SCORE MUSTN'T BE EMPTY" })
      return
    }

    try {
      const { data } = await postReviewLocation({
        is_hided: false,
        location_id: Number(id),
        score: Number(reviewValue.score_input),
        submitted_by: Number(user.id),
        is_from_critic: user.is_critics,
        comments: reviewValue.review_textArea,
      })

      setPageState({ ...pageState, enable_post: false, on_submit_loading: false })
      setReviewValue({ review_textArea: '', score_input: '' })
      setCurrentUserReview({
        id: data.id,
        comments: data.comments,
        is_from_critic: data.is_from_critic,
        is_hided: data.is_hided,
        location_id: data.location_id,
        score: data.score,
        submitted_by: data.submitted_by,
        created_at: data.created_at,
        updated_at: data.updated_at
      })
      setUpdatePage(true)
    } catch (error) {
      let err = error as AxiosError;
      console.log(err)
      const str = handleAxiosError(err)
      alert(str)
      setPageState({ ...pageState, on_submit_loading: false  })
    }

  }

  function handleSignInNavigation(e: TargetedEvent<HTMLAnchorElement>) {
    e.preventDefault();


    navigate('/login', { state: { from: `/location/${id}` } })
  }

  useEffect(() => {
    getCurrentUserLocationReview()
  }, [])
  
  useEffect(() => {
    if(updatePage) {
      getLocationDetail()
    }
  }, [updatePage])

  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' }}>
                  {locationDetail.detail.critic_count !== 0 ? Math.floor(Number(locationDetail.detail.critic_score) / Number(locationDetail.detail.critic_count)) : "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: ` ${locationDetail.detail.critic_count !== 0 ? Number(locationDetail.detail.critic_score) : 0}%`, backgroundColor: 'green' }} />
                      </div>
                    </div>
                  </div>
                </div>
                {locationDetail.detail.critic_count !== 0 &&
                  <div className={'ml-14 text-sm'}>
                    Based on {locationDetail.detail.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 mr-4'} style={{ width: 95, float: 'left' }}>
                  {locationDetail.detail.user_count !== 0 ? Math.floor(Number(locationDetail.detail.user_score) / Number(locationDetail.detail.user_count)) : "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: ` ${locationDetail.detail.user_count !== 0 ? Number(locationDetail.detail.user_score) / Number(locationDetail.detail.user_count) : 0}%`, backgroundColor: 'green' }} />
                      </div>
                    </div>
                  </div>
                </div>
                {locationDetail.detail.user_count !== 0 &&
                  <div className={'ml-14 text-sm'}>
                    Based on {locationDetail.detail.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' }}>
              {!user.username ?
                <div className={'bg-secondary text-center p-3'} style={{ width: '100%' }}><a href={'#'} onClick={handleSignInNavigation} style={{ borderBottom: '1px solid white' }}>SIGN IN</a> TO REVIEW</div>
                :
                <div name="REVIEW INPUT TEXTAREA" className={'reviewContainer p-4'} style={{ backgroundColor: '#2f3136' }}>
                  <div className={'review-box-content'}>

                    <div className={'userImage mr-3'} style={{ width: 55, float: 'left' }}>
                      <a href={'#'}>
                        <img loading={'lazy'} src={user.avatar_picture != '' ? user.avatar_picture.toString() : DEFAULT_AVATAR_IMG} style={{ aspectRatio: '1/1' }} />
                      </a>
                    </div>

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

                    <div className={'ratingInput'} style={currentUserReview ? { margin: '0 0 10px' } : { margin: '5px 0 10px' }}>
                      {currentUserReview  ?
                        <div style={{ display: 'inline-block' }}>
                          <p className={'ml-2'}>{currentUserReview.score}</p>
                          <div style={{ height: 4, width: 35, backgroundColor: "#72767d" }}>
                            <div style={{ height: 4, width: `${currentUserReview.score}%`, backgroundColor: 'green' }} />
                          </div>
                        </div>
                        :
                        <>
                          <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>
                          {pageState.is_score_rating_panic_msg &&
                            <div className={'inline-block text-xs ml-2 text-error'}>{pageState.is_score_rating_panic_msg}</div>
                          }
                        </>

                      }
                      <div style={{ clear: 'both' }} />
                    </div>

                    <div className={'mt-3'} style={{ width: '100%' }}>
                      {currentUserReview ?
                        <CustomInterweave
                          content={currentUserReview.comments}
                        />
                        :
                        <ReactTextareaAutosize
                          onChange={handleTextAreaChange}
                          ref={textAreaRef}
                          className={'p-2 text-area text-sm'}
                          value={reviewValue.review_textArea}
                        />
                      }
                    </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>
                      {pageState.on_submit_loading ?
                        <SpinnerLoading />
                        :
                        <span className={'text-xxs p-1 text-area-button'} style={pageState.enable_post ? '' : { display: 'none'}}>
                          <a href={'#'} onClick={handleSubmitReview}>
                            POST
                          </a>
                        </span>
                      }
                    </div>
                  </div>
                </div>

              }
              <div name={'CRTICITS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
                <SeparatorWithAnchor pageName={"critic's review"} pageLink='#' />
                {locationDetail.critics_review.length > 0 ? 
                <>
                    <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' }} />

                    {locationDetail.critics_review.map(x => (
                      <div className={''} style={{ padding: '15px 0' }}>
                        <div style={{ float: 'left' }}>
                          <div style={{ fontSize: 20, marginRight: 20, textAlign: 'center', width: 55, marginBottom: 3 }}>
                            {x.score}
                          </div>
                          <div style={{ height: 4, width: 55, position: 'relative', backgroundColor: '#d8d8d8' }}>
                            <div style={{ height: 4, backgroundColor: '#85ce73', width: `${x.score}%` }} />
                          </div>
                        </div>
                        <div className={'mr-3'} style={{ display: 'inline-block', width: 40 }}>
                          <a href="#">
                            <img
                              loading={'lazy'}
                              style={{ width: '100%' }}
                              src={x.user_avatar.Valid ? x.user_avatar.String.toString() : '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>{x.username}</span>
                            </a>
                          </div>
                        </div>
                        <div style={{ fontSize: 15, lineHeight: '24px', margin: '5px 75px 1px' }}>
                          <CustomInterweave
                            content={x.comments}
                          />
                        </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>
                    ))}
                </>

                :
                <>
                  <span className={'text-sm italic'}>No Critics review to display</span>
                </>

                }
              </div>

              <div name={'USERS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
                <SeparatorWithAnchor pageName={"User's review"} pageLink='#' secondLink={locationDetail.users_review.length > 0 ? '#' : ''} />
                { locationDetail.users_review.length > 0 ?
                  <>
                    {locationDetail.users_review.map(x => (
                      <div style={{ padding: '15px 0' }}>
                        <div className={'mr-5'} style={{ width: 45, float: 'left' }}>
                          <a href="#">
                            <img
                              loading={'lazy'}
                              style={{ width: '100%' }}
                              src={x.user_avatar.Valid ? x.user_avatar.String.toString() : '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>{x.username}</span>
                            </a>
                          </div>
                        </div>
                        <div className={'inline-block'}>
                          <div className={'text-sm text-center'} >{x.score}</div>
                          <div style={{ height: 4, width: 25, position: 'relative', backgroundColor: '#d8d8d8' }}>
                            <div style={{ height: 4, backgroundColor: '#85ce73', width: `${x.score}%` }} />
                          </div>
                        </div>
                        <div style={{ fontSize: 15, lineHeight: '24px', margin: '10px 65px 1px', wordWrap: 'break-word' }}>
                          <CustomInterweave
                            content={x.comments}
                          />
                        </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>
                  </>
                  : 
                  <>
                    <span className={'text-sm italic'}>No users review to display</span>
                  </>
                }
              </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 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 }}>
              // ADD USER DISTRIBUTION SOMETHING LIKE THIS
              // https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_user_rating
                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;