import {
  SiXHex,
  SiThreadsHex,
  SiInstagramHex,
  SiFacebookHex,
  SiTiktokHex,
  SiYoutubeHex,
  SiLinkedinHex,
  SiGithubHex,
} 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',
    },
    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,
      },
      linkedin: {
        light: SiLinkedinHex,
        dark: SiLinkedinHex,
      },
      github: {
        light: SiGithubHex,
        dark: invertColor(SiGithubHex),
      },
    },
  },
}

export const darkMode = ['class', '[data-theme="dark"]']
export const plugins = [require('daisyui')]
export const daisyui = { themes: ['light', 'dark'] }