import React, { useContext } from 'react'
import { format } from 'timeago.js'
import { SiLetterboxd } from 'react-icons/si'
import { VscTriangleUp } from 'react-icons/vsc'
import CardComponent from '../components/CardComponent'
import ListComponent from '../components/ListComponent'
import lobstersApi from '../services/lobsters'
import { BiCommentDetail } from 'react-icons/bi'
import { MdAccessTime } from 'react-icons/md'
import { GoPrimitiveDot } from 'react-icons/go'
import CardLink from '../components/CardLink'
import CardItemWithActions from '../components/CardItemWithActions'
import ClickableItem from '../components/ClickableItem'
import PreferencesContext from '../preferences/PreferencesContext'

const StoryItem = ({ item, index, analyticsTag }) => {
  const { listingMode } = useContext(PreferencesContext)
  return (
    <CardItemWithActions
      source={'lobsters'}
      index={index}
      item={item}
      key={index}
      cardItem={
        <>
          <p className="rowTitle">
            <CardLink link={item.url} analyticsSource={analyticsTag}>
              {listingMode === 'compact' && (
                <div className="counterWrapper">
                  <VscTriangleUp />
                  <span className="value">{item.score}</span>
                </div>
              )}

              <div className="subTitle">{item.title}</div>
            </CardLink>
          </p>
          {listingMode === 'normal' && (
            <div className="rowDetails">
              <span className="rowItem lobstersRowItem">
                <GoPrimitiveDot className="rowItemIcon" /> {item.score} points
              </span>
              <span className="rowItem" title={new Date(item.created_at).toUTCString()}>
                <MdAccessTime className="rowItemIcon" /> {format(new Date(item.created_at))}
              </span>
              <ClickableItem
                link={item.comments_url}
                className="rowItem rowItemClickable"
                analyticsSource={analyticsTag}>
                <BiCommentDetail className="rowItemIcon" /> {item.comment_count} comments
              </ClickableItem>
            </div>
          )}
        </>
      }
    />
  )
}

function LobstersCard({ analyticsTag, label, icon, withAds }) {
  const fetchStories = async () => {
    return await lobstersApi.getTopStories()
  }

  const renderItem = (item, index) => (
    <StoryItem item={item} key={`lb-${index}`} index={index} analyticsTag={analyticsTag} />
  )

  return (
    <CardComponent
      icon={<span className="blockHeaderIcon">{icon}</span>}
      link="https://lobste.rs/"
      title={label}>
      <ListComponent fetchData={fetchStories} renderItem={renderItem} withAds={withAds} />
    </CardComponent>
  )
}

export default LobstersCard