import {
  SiXHex,
  SiThreadsHex,
  SiInstagramHex,
  SiFacebookHex,
  SiTiktokHex,
  SiYoutubeHex,
  SiLinkedinHex,
  SiMatrixHex,
  SiGithubHex,
  SiGiteaHex,
  SiLeetcodeHex,
  SiSteamHex,
  SiDiscordHex,
  SiTwitchHex,
  SiForgejoHex,
  SiGitlabHex,
  SiBitbucketHex,
} from '@icons-pack/react-simple-icons'

const invertColor = (hex) => {
  if (hex.startsWith('#')) hex = hex.slice(1)

  if (hex.length !== 6) throw new Error('Invalid hex color code')

  const r = parseInt(hex.slice(0, 2), 16)
  const g = parseInt(hex.slice(2, 4), 16)
  const b = parseInt(hex.slice(4, 6), 16)

  const invertedR = (255 - r).toString(16).padStart(2, '0')
  const invertedG = (255 - g).toString(16).padStart(2, '0')
  const invertedB = (255 - b).toString(16).padStart(2, '0')

  return `#${invertedR}${invertedG}${invertedB}`
}

/** @type {import('tailwindcss').Config} */
export const content = ['src/**/*.{js,jsx,ts,tsx}']
export const theme = {
  extend: {
    width: {
      46: '11.5rem',
      54: '13.5rem',
    },
    maxWidth: {
      68: '17rem',
    },
    height: {
      128: '32rem',
    },
    aspectRatio: {
      portrait: '4 / 5',
    },
    fontFamily: {
      syne: ['Syne', 'sans-serif'],
      inter: ['Inter', 'sans-serif'],
    },
    animation: {
      enter: 'enter 200ms ease-out',
      leave: 'leave 200ms ease-in forwards',
    },
    keyframes: {
      enter: {
        '0%': { transform: 'scale(0.75) translateY(-110%)', opacity: 0 },
        '25%': { opacity: 0 },
        '100%': { transform: 'scale(1) translateX(0)', opacity: 1 },
      },
      leave: {
        '0%': { transform: 'scale(1) translateX(0)', opacity: 1 },
        '75%': { opacity: 0 },
        '100%': { transform: 'scale(0.75) translateY(-110%)', opacity: 0 },
      },
    },
    colors: {
      x: {
        light: SiXHex,
        dark: invertColor(SiXHex),
      },
      threads: {
        light: SiThreadsHex,
        dark: invertColor(SiThreadsHex),
      },
      instagram: {
        light: SiInstagramHex,
        dark: SiInstagramHex,
      },
      facebook: {
        light: SiFacebookHex,
        dark: SiFacebookHex,
      },
      tiktok: {
        light: SiTiktokHex,
        dark: invertColor(SiTiktokHex),
      },
      youtube: {
        light: SiYoutubeHex,
        dark: SiYoutubeHex,
      },

      steam: {
        light: SiSteamHex,
        dark: invertColor(SiSteamHex),
      },
      discord: {
        light: SiDiscordHex,
        dark: SiDiscordHex,
      },
      twitch: {
        light: SiTwitchHex,
        dark: SiTwitchHex,
      },
      linkedin: {
        light: SiLinkedinHex,
        dark: SiLinkedinHex,
      },
      matrix: {
        light: SiMatrixHex,
        dark: invertColor(SiMatrixHex),
      },
      github: {
        light: SiGithubHex,
        dark: invertColor(SiGithubHex),
      },
      gitea: {
        light: SiGiteaHex,
        dark: SiGiteaHex,
      },
      forgejo: {
        light: SiForgejoHex,
        dark: SiForgejoHex,
      },
      gitlab: {
        light: SiGitlabHex,
        dark: SiGitlabHex,
      },
      bitbucket: {
        light: SiBitbucketHex,
        dark: SiBitbucketHex,
      },
      leetcode: {
        light: SiLeetcodeHex,
        dark: SiLeetcodeHex,
      },
    },
  },
}

export const darkMode = ['class', '[data-theme="dark"]']
export const plugins = [require('@tailwindcss/typography'), require('daisyui')]
export const daisyui = {
  themes: [
    'light',
    {
      dark: {
        ...require('daisyui/src/theming/themes')['dark'],
        'base-100': '#212121',
        'base-200': '#1d1d1d',
        'base-300': '#191919',
      },
    },
  ],
}