import React from "react"
import styled, { css } from "styled-components"

import { FlexContainer, Typography } from "@/components/shared/components"
import { useThemeContext } from "@/providers/themeProvider"
import { DropIcon, HistoryIcon, StarIcon } from "@/icons"
import useAutomationAgentStore from "../store"
import { SwapAgentTab } from "../types"

const Tab = styled(FlexContainer)<{ isActive?: boolean }>`
  ${({ theme, isActive }) => css`
    min-width: 8rem;
    gap: 1rem;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    p {
      color: ${isActive ? theme.colors.white : theme.colors.gray500};
      transition: color 0.2s ease-in-out;
    }

    svg {
      transition:
        fill 0.2s ease-in-out,
        color 0.2s ease-in-out;
    }

    &:hover {
      p {
        color: ${!isActive ? theme.colors.gray300 : "default"};
      }
    }
  `}
`

function SwapAgentTabs() {
  const { theme } = useThemeContext()
  const { selectedAgent, currentStep, currentTab, setCurrentTab } =
    useAutomationAgentStore()

  const selectedAgentColor =
    currentStep === "SELECT_AGENT"
      ? currentTab === SwapAgentTab.NEW_AGENT
        ? theme.colors.white
        : theme.colors.gray500
      : selectedAgent === "SURGE"
        ? theme.colors.success
        : theme.colors.error

  return (
    <FlexContainer alignItems="center" gap={3.2}>
      <Tab
        isActive={currentTab === SwapAgentTab.NEW_AGENT}
        onClick={() => setCurrentTab(SwapAgentTab.NEW_AGENT)}
      >
        <FlexContainer
          justifyContent="center"
          alignItems="center"
          borderColor={selectedAgentColor}
          padding="0.8rem"
          borderRadius={1}
          style={{
            borderWidth: "0.2rem",
          }}
        >
          <StarIcon color={selectedAgentColor} />
        </FlexContainer>
        <Typography type="TITLE_S">New</Typography>
      </Tab>

      <Tab
        isActive={currentTab === SwapAgentTab.ACTIVE}
        onClick={() => setCurrentTab(SwapAgentTab.ACTIVE)}
      >
        <DropIcon
          color={
            theme.colors?.[
              currentTab === SwapAgentTab.ACTIVE ? "white" : "gray500"
            ]
          }
        />
        <Typography type="TITLE_S">Active</Typography>
      </Tab>

      <Tab
        isActive={currentTab === SwapAgentTab.HISTORY}
        onClick={() => setCurrentTab(SwapAgentTab.HISTORY)}
      >
        <HistoryIcon
          color={
            theme.colors?.[
              currentTab === SwapAgentTab.HISTORY ? "white" : "gray500"
            ]
          }
        />
        <Typography type="TITLE_S">History</Typography>
      </Tab>
    </FlexContainer>
  )
}

export default SwapAgentTabs