/**
 * Component for antd Tag
 */
import React, { useContext, useEffect } from 'react';
import { Tag as AntdTag } from 'antd';
import { GlobalContext } from '../../../Store';
import './tag.scss';

/**
 * Tag Wrapper Component
 *
 * @param {*} param0
 * @returns
 */
export default function Tag({ color, children }) {
  const { state } = useContext(GlobalContext);

  useEffect(() => {
    // Force a re-render if necessary
  }, [state.theme.colors]);

  // Extract theme colors from the global state

  // Define a mapping for the color types and their respective theme colors
  const statusColorMap = {
    orange: state.theme.colors.tagOrange,
    success: state.theme.colors.tagSuccess,
    magenta: state.theme.colors.tagMagenta,
    blue: state.theme.colors.tagBlue,
    green: state.theme.colors.tagGreen,
  };

  // Define a mapping for the corresponding text colors
  const textColorMap = {
    orange: state.theme.colors.textOrange,
    success: state.theme.colors.textSuccess,
    magenta: state.theme.colors.textMagenta,
    blue: state.theme.colors.textBlue,
    green: state.theme.colors.textGreen,
  };

  const borderColorMap = {
    orange: state.theme.colors.borderOrange,
    success: state.theme.colors.borderSuccess,
    magenta: state.theme.colors.borderMagenta,
    blue: state.theme.colors.borderBlue,
    green: state.theme.colors.borderGreen,
  };

  // Get the color from the theme or fallback if not found
  const tagBackgroundColor = statusColorMap[color];
  const tagFontColor = textColorMap[color];
  // const tagBorderColor = borderColorMap[color];

  return (
    <AntdTag color={tagBackgroundColor} 
    style={{ color: tagFontColor, 
    // border: `1px solid ${tagBorderColor}` 
    }}>
      {children}
    </AntdTag>
  );
}
