import { JSXInternal } from "node_modules/preact/src/jsx";
import { LocationInfo } from "../../../domains";
import { cn } from "../../../utils/common";
import FallbackImage from "../../../../src/components/Img/FallbackImage";

interface ComponentProps {
  onCardClick: (id: number) => void,
  data: LocationInfo,
  containerClass?: string,
  containerStyle?: JSXInternal.CSSProperties
}

const LocationCard = (props: ComponentProps) => {
  const getScoreClasses = (score: number, count: number) => {
    if (count === 0) return {
      text: 'text-white',
      bg: 'bg-white'
    };

    if (score <= 40) return {
      text: 'text-rating-red',
      bg: 'bg-rating-red'
    };
    if (score <= 69) return {
      text: 'text-rating-yellow',
      bg: 'bg-rating-yellow'
    };
    return {
      text: 'text-brand-green',
      bg: 'bg-brand-green'
    };
  };

  const criticClasses = getScoreClasses(props.data.critic_score, props.data.critic_count);
  const userClasses = getScoreClasses(props.data.user_score, props.data.user_count);

  return (
    <div className={props.containerClass} style={props.containerStyle}>
      <a onClick={() => props.onCardClick(props.data.id)}>
        <div className={'border-secondary recently-img-container'}>
          <FallbackImage
            thumbnail={props.data.thumbnail}
            locationType={props.data.location_type}
            alt={props.data.name}
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
          />
        </div>
      </a>
      <div className={"border-primary pb-2 location-container text-sm mb-2 mt-2"}>
        <p className={'location-title'}>{props.data.name}</p>
        <p className={'text-xs mt-1 h-8 line-clamp-2'}>{props.data.regency_name}, {props.data.province_name}</p>
      </div>
      <div className={"flex flex-row items-center mb-3"}>
        <div className={'mr-3 users-score-bar'}>
          <p className={cn('text-md text-center', criticClasses.text)}>{props.data.critic_count !== 0 ? props.data.critic_score : 'NR'}</p>
          <div className="h-1 w-[30px] bg-[#72767d] rounded-full overflow-hidden">
            <div className={cn('h-full rounded-full', criticClasses.bg)} style={{ width: `${props.data.critic_score}%` }} />
          </div>
        </div>
        <p className={"users-score"}>Critic score ({props.data.critic_count})</p>
      </div>
      <div className={"flex flex-row items-center"}>
        <div className={'mr-3 users-score-bar'}>
          <p className={cn('text-md text-center', userClasses.text)}>{props.data.user_count !== 0 ? props.data.user_score : 'NR'}</p>
          <div className="h-1 w-[30px] bg-[#72767d] rounded-full overflow-hidden">
            <div className={cn('h-full rounded-full', userClasses.bg)} style={{ width: `${props.data.user_score}%` }} />
          </div>
        </div>
        <p className={'users-score'}>User score ({props.data.user_count})</p>
      </div>
    </div>
  );
}

export default LocationCard;