import React, { useState } from 'react';
import { FaDiscord, FaReddit, FaWhatsapp } from 'react-icons/fa';
import styled from 'styled-components';
import { DraggableContainer } from '../DraggableContainer';
import { Dropdown, IOptionsProps } from '../Dropdown';
import { Divider } from '../shared/Divider/Divider';
import socialModalGroup from './images/social-modal-group.png';

interface ISocialModalProps {
  onClose: () => void;
}

type WhatsAppLanguage = 'english' | 'pt-BR' | 'polski' | 'español';

const whatsAppGroups: IOptionsProps[] = [
  { id: 1, value: 'english', option: 'Global (English)' },
  { id: 2, value: 'pt-BR', option: 'Brasil (Português)' },
  { id: 3, value: 'español', option: 'Español' },
  { id: 4, value: 'polski', option: 'Polski' },
];

const socialLinks = {
  discord: 'https://discord.gg/xWBYBWanvE',
  reddit: 'https://www.reddit.com/r/DefinyaMMO/',
  whatsapp: {
    english: 'https://chat.whatsapp.com/H8U1Jt7hJNdIWO19atAnRu',
    'pt-BR': 'https://chat.whatsapp.com/DwXJz2RXDsG2X6ANOm4FtQ',
    español: 'https://chat.whatsapp.com/BPlJ1RxshEiErNceZkdhyf',
    polski: 'https://chat.whatsapp.com/DromXMChOmZK5JHXXdrEWr',
  } as Record<WhatsAppLanguage, string>,
};

export const SocialModal: React.FC<ISocialModalProps> = ({ onClose }) => {
  const [selectedLanguage, setSelectedLanguage] = useState<WhatsAppLanguage>(
    'english'
  );

  const handleLanguageChange = (value: string) => {
    setSelectedLanguage(value as WhatsAppLanguage);
  };

  const handleWhatsAppClick = () => {
    window.open(
      socialLinks.whatsapp[selectedLanguage],
      '_blank',
      'noopener,noreferrer'
    );
  };

  const handleDiscordClick = () => {
    window.open(socialLinks.discord, '_blank', 'noopener,noreferrer');
  };

  const handleRedditClick = () => {
    window.open(socialLinks.reddit, '_blank', 'noopener,noreferrer');
  };

  return (
    <DraggableContainer
      title="Social Channels"
      width="500px"
      onCloseButton={onClose}
    >
      <Container>
        <HeaderImage src={socialModalGroup} alt="" />
        <ButtonsContainer>
          <MainButtons>
            <SocialButton onClick={handleDiscordClick}>
              <FaDiscord /> Discord
            </SocialButton>
            <SocialButton onClick={handleRedditClick}>
              <FaReddit /> Reddit
            </SocialButton>
          </MainButtons>

          <Divider margin="8px 0" />

          <DropdownContainer>
            <Dropdown
              options={whatsAppGroups}
              onChange={handleLanguageChange}
              width="100%"
              opensUp={true}
            />

            <WhatsAppButton onClick={handleWhatsAppClick}>
              <FaWhatsapp /> Join WhatsApp
            </WhatsAppButton>
          </DropdownContainer>
        </ButtonsContainer>
      </Container>
    </DraggableContainer>
  );
};

const Container = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: #5c4132;
  position: relative;
  border-radius: 8px;
  overflow: hidden;

  &:before,
  &:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
  }

  &:before {
    bottom: 0;
    background: linear-gradient(
      to right,
      #5c4132 0%,
      #2b1810 2%,
      #2b1810 98%,
      #5c4132 100%
    );
  }
`;

const HeaderImage = styled.img`
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  display: block;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
`;

const ButtonsContainer = styled.div`
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

const MainButtons = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
`;

const SocialButton = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.7rem;
  transition: all 0.2s ease;

  &:hover {
    background-color: rgba(255, 255, 255, 0.12);
  }

  svg {
    font-size: 1.1rem;
  }
`;

const WhatsAppButton = styled(SocialButton)`
  width: 100%;
  background-color: #0f1f0f;
  border: 1px solid #1a2f1a;
  padding: 14px;

  &:hover {
    background-color: #162716;
  }

  margin-top: 8px;
`;

const DropdownContainer = styled.div`
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.3);
`;
