import { StyleSheet } from 'react-native';
import { LANG_FLAGS } from './lang';

interface FlagStyle {
  width: number;
  height: number;
  backgroundColor: string;
  backgroundImage: string;
  backgroundSize: string;
  backgroundPosition: string;
}

const generateFlagStyle = (index: number): FlagStyle => {
  const xPosition = index % 24 * -25;
  const yPosition = Math.floor(index / 24) * -15;
  return {
    width: 25,
    height: 15,
    backgroundColor: 'transparent',
    backgroundImage: require("@/assets/images/lang-flags.png"),
    backgroundSize: '600px 375px',
  };
};

export const FLAG_STYLES = StyleSheet.create({
  ...Object.fromEntries(Object.keys(LANG_FLAGS).map((k, i) => {
    return [k, generateFlagStyle(i)]
  }))
});