import { farcasterHubContext } from "frames.js/middleware";
import { createFrames, Button } from 'frames.js/express';

const frames = createFrames({
  middleware: [
    farcasterHubContext({
      // remove if you aren't using @frames.js/debugger or you just don't want to use the debugger hub
      ...(process.env.NODE_ENV === "production"
        ? {}
        : {
            hubHttpUrl: "http://localhost:3010/hub",
          }),
    }),
  ],
});

export const handleRequest = frames(async ctx => {
  const backgroundStyle = {
    backgroundImage: "url('https://cdn.discordapp.com/attachments/1112779711488209016/1272625640520159324/image.png?ex=66bba87c&is=66ba56fc&hm=fa3c7107b06270a581ad38ab39d2e1a0ea9bad8abc826e7c57e2284910dc4d3d&')",
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center',
    width: '100%',
    height: '100%',
    display: "flex",
    flexDirection: "column",
    color: "white", // Adjust text color for visibility
    textShadow: "2px 2px 4px rgba(0,0,0,0.5)", // Optional: add shadow for better readability
  };

  return {
    image: ctx.message ? (
      console.log(ctx.message),
      <div style={backgroundStyle}>
        {ctx.message.requesterFollowsCaster == true
          ? "Thanks for the follow"
          : "you didn't follow XppaiCyber"}
      </div>
    ) : (
      <div style={backgroundStyle}>
        Get Most Efficient Energy on Pixels
        Just need to Follow @xppaicyber to see the data
      </div>
    ),
    buttons: !ctx.url.searchParams.has("hehe")
      ? [
          <Button action="post" key="1" target={{ query: { hehe: true } }}>
            Get Most Efficient Energy
          </Button>,
          <Button action="link" target="https://warpcast.com/xppaicyber">XppaiCyber</Button>,
        ]
      : [],
  };
});