import React from "react";
import { buttonNames } from "./names";
import { useTheme } from "styled-components";
import { Icon } from '@iconify/react';

import exitToApp from '@iconify/icons-ic/twotone-exit-to-app';
import deleteIcon from '@iconify/icons-ic/baseline-delete';
import settings from '@iconify/icons-ic/baseline-settings';
import info from '@iconify/icons-ic/baseline-info';
import arrowDown from '@iconify/icons-ic/baseline-keyboard-arrow-down';
import arrowRight from '@iconify/icons-ic/baseline-keyboard-arrow-right';
import arrowLeft from '@iconify/icons-ic/baseline-keyboard-arrow-left';
import edit from '@iconify/icons-ic/baseline-edit';
import checkCircle from '@iconify/icons-ic/round-check-circle';
import cancel from '@iconify/icons-ic/baseline-cancel';
import userSearch from '@iconify/icons-ic/baseline-person-search';
import admin from '@iconify/icons-ic/baseline-admin-panel-settings';
import noAdmin from '@iconify/icons-ic/baseline-remove-moderator'
import refresh from '@iconify/icons-ic/baseline-refresh';
import close from '@iconify/icons-ic/round-close';
import wifiFind from '@iconify/icons-ic/baseline-wifi-find';
import noteEdit from '@iconify/icons-ph/note-pencil';

export const ICONS = {
    [buttonNames[1]]: exitToApp,
    [buttonNames[2]]: deleteIcon,
    [buttonNames[3]]: settings,
    [buttonNames[4]]: info,
    [buttonNames[5]]: arrowDown,
    [buttonNames[6]]: arrowRight,
    [buttonNames[7]]: edit,
    [buttonNames[8]]: checkCircle,
    [buttonNames[9]]: cancel,
    [buttonNames[10]]: admin,
    [buttonNames[11]]: refresh,
    [buttonNames[12]]: close,
    [buttonNames[13]]: noAdmin,
    [buttonNames[14]]: userSearch,
    [buttonNames[15]]: wifiFind,
    [buttonNames[16]]: noteEdit,
    [buttonNames[17]]: arrowLeft,
} as const;

type IconName = keyof typeof ICONS;

interface IconsProps {
    name: IconName,
    width?: string
    height?: string
    setColor?: string
    onClick?: (event?: React.MouseEvent<SVGSVGElement>) => void;
}

export const IconComponent = ({ name, width = "24", height = "24", setColor, onClick}: IconsProps) => {
    const theme = useTheme();
    return (
        <Icon 
            icon={ICONS[name]} 
            width={width} 
            height={height} 
            color={setColor || theme.textColor} 
            onClick={onClick} 
        />
    );
}