import { ImageResponse } from "next/og"
import General from "@/icons/general.js"
import Teen from "@/icons/teen.js"
import Mature from "@/icons/mature.js"
import Explicit from "@/icons/explicit.js"
import NotRated from "@/icons/notrated.js"
import Gen from "@/icons/gen.js"
import Yaoi from "@/icons/yaoi.js"
import Yuri from "@/icons/yuri.js"
import Het from "@/icons/het.js"
import OtherShip from "@/icons/other.js"
import MultiShip from "@/icons/multi.js"
import NoWarnings from "@/icons/nowarnings.js"
import Warnings from "@/icons/warnings.js"
import ChoseNotToWarn from "@/icons/chosenottowarn.js"

export default async function OGImage ({ theme, baseFont, titleFont, image, addr, opts }) {
  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          color: theme.color,
          backgroundColor: theme.background,
          fontFamily: baseFont,
          fontSize: 24,
          padding: 20,
          width: "100%",
          height: "100%",
        }}
      >
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            marginBottom: 20
          }}
        >
          <div
            style={{
              textTransform: "uppercase",
              display: "flex",
              justifyContent: "center",
              gap: 10,
              color: theme.accent,
              alignItems: "center"
            }}
          >
            <div
            style={{
              display: "flex"
            }}
            >
              {image.topLine}
            </div>
              
            {image.props.get('rating') === 'true' && image.rating === 'E' && (<Explicit fg={theme.background} bg={theme.accent} width={28} height={28} />)}
            {image.props.get('rating') === 'true' && image.rating === 'M' && (<Mature fg={theme.background} bg={theme.accent} width={28} height={28} />)}
            {image.props.get('rating') === 'true' && image.rating === 'T' && (<Teen fg={theme.background} bg={theme.accent} width={28} height={28} />)}
            {image.props.get('rating') === 'true' && image.rating === 'G' && (<General fg={theme.background} bg={theme.accent} width={28} height={28} />)}
            {image.props.get('rating') === 'true' && image.rating === 'NR' && (<NotRated fg={theme.background} bg={theme.accent} width={28} height={28} />)}
            
            {image.props.get('warnings') === 'true' && image.warning === 'NW' && (<NoWarnings fg={theme.background} bg={theme.accent2} width={28} height={28} />)}
            {image.props.get('warnings') === 'true' && image.warning === 'CNTW' && (<ChoseNotToWarn fg={theme.background} bg={theme.accent2} width={28} height={28} />)}
            {image.props.get('warnings') === 'true' && image.warning === 'W' && (<Warnings fg={theme.background} bg={theme.accent2} width={28} height={28} />)}
            
            {image.props.get('category') === 'true' && image.category === 'F' && (<Yuri fg={theme.background} bg={theme.accent3} width={28} height={28} />)}
            {image.props.get('category') === 'true' && image.category === 'M' && (<Yaoi fg={theme.background} bg={theme.accent3} width={28} height={28} />)}
            {image.props.get('category') === 'true' && image.category === 'FM' && (<Het fg={theme.background} bg={theme.accent3} width={28} height={28} />)}
            {image.props.get('category') === 'true' && image.category === 'G' && (<Gen fg={theme.background} bg={theme.accent3} width={28} height={28} />)}
            {image.props.get('category') === 'true' && image.category === 'MX' && (<MultiShip fg={theme.background} bg={theme.accent3} width={28} height={28} />)}
            {image.props.get('category') === 'true' && image.category === 'O' && (<OtherShip fg={theme.background} bg={theme.accent3} width={28} height={28} />)}
          </div>
          <div
            style={{
              fontSize: 54,
              justifyContent: "center",
              fontFamily: titleFont,
              fontWeight: "bold",
              color: theme.color
            }}
          >
            {image.titleLine}
          </div>
          <div
            style={{
              fontSize: 42,
              display: "flex",
              justifyContent: "center",
              fontFamily: titleFont,
              color: theme.color
            }}
          >
            {`by ${image.authorLine}`}
          </div>
          <div
            style={{
              fontStyle: "italic",
              fontSize: 36,
              fontFamily: titleFont,
              display: "flex",
              justifyContent: "center",
              color: theme.color
            }} 
          >
            {image.chapterLine}
          </div>
        </div>
        <div
          style={{
            backgroundColor: theme.descBackground,
            padding: 20,
            display: "flex",
            flexDirection: "column",
            flexGrow: 1,
            color: theme.descColor,
            alignItems: "flex-end"
          }}   
        >
          {image.props.get("charTags") === 'true' && (<div
            style={{
              display: "flex",
              flexWrap: "wrap",
              gap: 5,
              fontSize: 18,
              width: "100%",
              marginBottom: 5
            }}
          >
            {image.charTags.map(c => (
              <span
                style={{
                  backgroundColor: theme.accent2,
                  color: theme.descBackground,
                  padding: "3px 5px",
                  borderRadius: 5
                }}
              >
                {c}
              </span>
            ))}
          </div>)}
          {image.props.get("relTags") === 'true' && (<div
            style={{
              display: "flex",
              flexWrap: "wrap",
              gap: 5,
              fontSize: 18,
              width: "100%",
              marginBottom: 5
            }}
          >
            {image.relTags.map(r => (
              <span
                style={{
                  backgroundColor: theme.accent3,
                  color: theme.descBackground,
                  padding: "3px 5px",
                  borderRadius: 5
                }}
              >
                {r}
              </span>
            ))}
          </div>)}
          {image.props.get("freeTags") === 'true' && (<div
            style={{
              display: "flex",
              flexWrap: "wrap",
              gap: 5,
              fontSize: 18,
              width: "100%",
              marginBottom: 5
            }}
          >
            {image.freeTags.map(f => (
              <span
                style={{
                  backgroundColor: theme.accent4,
                  color: theme.descBackground,
                  padding: "3px 5px",
                  borderRadius: 5
                }}
              >
                {f}
              </span>
            ))}
          </div>)}
          {image.props.get("summary") === 'true' && (<div
            style={{
              display: "flex",
              flexDirection: "column",
              flexGrow: 1,
              width: '100%'
            }}
          >
            {image.summary.map(l => (
              <div
                style={{
                  width: "100%",
                  marginBottom: 10
                }}
              >
                {l}
              </div>
            ))}
          </div>)}
          <div
            style={{
              textAlign: "right",
              fontSize: 18,
              display: "flex",
              justifyContent: "flex-end",
              alignItems: "center",
              color: theme.accent2
            }}
          >
            {image.props.get("wordcount") === 'true' && `${image.words} words • `}{(image.props.get("chapters") === 'true' && image.chapterCount !== null) && `${image.chapterCount}  chapters • `}{image.props.get("postedAt") === 'true' && `posted on ${image.postedAt} • `}{image.props.get("updatedAt") === 'true' && `updated on ${image.updatedAt} • `}{process.env.ARCHIVE}/{addr}
          </div>
        </div>
      </div>
    ),
    opts
  )
}