import styled from '@emotion/styled';
import React, { useRef, useState } from 'react';

import { Tooltip } from '../Tooltip';
import { ReactComponent as DuckSvg } from './pet.svg';

const DuckContainer = styled.div`
  position: absolute;
  width: 24px;
  height: 28px;
  top: -18px;
  left: calc(50% - 12px);
`;

const getRandomListItem = (quotes: string[]) => quotes[Math.floor(Math.random() * quotes.length)];

// If you found this, salute the duck, Sir!
// RIP @ssbarbee
const RIP_DATE = '2024-08-01';
const appearAfterDays = 1000 * 60 * 60 * 24 * 10;

export const Pet: React.FunctionComponent = () => {
  const shouldAppear = useRef(
    new Date().valueOf() > new Date(RIP_DATE).valueOf() + appearAfterDays &&
      Math.random() * 10000 < 1,
  );
  const [quote, setQuote] = useState('');
  const specialQuote = "I'm ssbarbee coding companion! Nice to meet you!";
  const listOfQuotes = [
    "I am just a golden duck, and I don't know why you're here.",
    'Nice meeting you sir!',
    "Brokoli eats asparagus, don't let him fool you!",
    "I don't lay golden eggs SIR!",
    'I am quite rare to find you see... Once in a blue moon.',
    "In the world of DeFi, I'm your lucky charm!",
    "Quack! Let's trade some tokens.",
    'HODL! Even ducks know that.',
    'Decentralized exchanges are the future, quack!',
    'Watch out for those trading fees, they can be a quack-mare!',
    "Liquidity pools? I'm all about that duck pond.",
    'In DeFi, trust the code, not the duck.',
    'Trading in DeFi is like a swim in the pond - sometimes smooth, sometimes rough.',
    'Even ducks diversify their portfolios.',
    "Let's hope this trade isn't a wild goose chase!",
  ];

  const onClick = () => {
    const lucky = Math.random() > 0.98;
    if (lucky) {
      setQuote(specialQuote);
    } else {
      setQuote(getRandomListItem(listOfQuotes));
    }
  };

  if (!shouldAppear.current) {
    return null;
  }

  const duck = (
    <DuckContainer onClick={onClick}>
      <DuckSvg aria-label="Easter Egg but hatched!" data-testid="ssbarbee-easter-egg" />
    </DuckContainer>
  );

  if (!quote) {
    return duck;
  }

  return <Tooltip trigger={duck}>{quote}</Tooltip>;
};