import Link from "next/link"
import React, { useState, useEffect } from "react"
import styled from "styled-components"

import {
  Button,
  FlexContainer,
  Typography,
} from "@/components/shared/components"
import { HeaderWrapper } from "@/components/shared/components/BlueStarsBgLayout/styles"
import { useIsMobile } from "@/hooks/use-is-mobile"
import { BrahmaIcon, DiscordIcon, TelegramIcon, XTwitterIcon } from "@/icons"
import { useThemeContext } from "@/providers/themeProvider"
import {
  BRAHMA_CONSOLE_KIT_LINK,
  BRAHMA_DISCORD_LINK,
  BRAHMA_TELEGRAM_LINK,
  BRAHMA_XTWITTER_LINK,
} from "@/components/shared/constants"

const StyledHeaderWrapper = styled(HeaderWrapper)<{ isScrolled: boolean }>`
  background-color: ${({ isScrolled }) =>
    isScrolled ? "black" : "transparent"};
  transition: background-color 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
`

function EarnHeader() {
  const isMobile = useIsMobile()
  const headerIconWidth = isMobile ? 24 : 28
  const { theme } = useThemeContext()
  const [isScrolled, setIsScrolled] = useState(false)

  useEffect(() => {
    const handleScroll = () => {
      const scrollY = window.scrollY
      if (scrollY > 100) {
        setIsScrolled(true)
      } else {
        setIsScrolled(false)
      }
    }

    // Add the event listener
    window.addEventListener("scroll", handleScroll)

    // Clean up the event listener when the component unmounts
    return () => {
      window.removeEventListener("scroll", handleScroll)
    }
  }, [])

  return (
    <StyledHeaderWrapper isScrolled={isScrolled}>
      <FlexContainer
        padding="1.6rem"
        justifyContent="space-between"
        width={100}
      >
        <Link href="/">
          <FlexContainer alignItems="center" gap={isMobile ? 0.4 : 0.8}>
            <BrahmaIcon width={headerIconWidth} height={headerIconWidth} />

            <div
              style={{
                borderLeft: `1px solid ${theme.colors.gray400}`,
                height: `${headerIconWidth}px`,
                margin: "0 4px",
              }}
            />

            <Typography
              type={!isMobile ? "TITLE_S" : "TITLE_XL"}
              style={{
                fontSize: !isMobile ? "2.2rem" : "1.6rem",
              }}
            >
              Agents
            </Typography>
          </FlexContainer>
        </Link>

        <FlexContainer flex={false} alignItems="center" gap={1.6}>
          <Link target="_blank" href={BRAHMA_TELEGRAM_LINK}>
            <TelegramIcon />
          </Link>
          <Link target="_blank" href={BRAHMA_XTWITTER_LINK}>
            <XTwitterIcon />
          </Link>
          <Link target="_blank" href={BRAHMA_DISCORD_LINK}>
            <DiscordIcon />
          </Link>

          <Link target="_blank" href={BRAHMA_CONSOLE_KIT_LINK}>
            <Button buttonType="white" buttonSize="S" type="button">
              ConsoleKit
            </Button>
          </Link>
        </FlexContainer>
      </FlexContainer>
    </StyledHeaderWrapper>
  )
}

export default EarnHeader