import React, { useState, useEffect, useContext } from 'react';

import { Button as ButtonElement } from 'antd';

import { GlobalContext } from '../../../Store';

import PropTypes from 'prop-types';

// import 'antd/dist/antd.css';

Button.propTypes = {
  /** Size of the button */
  size: PropTypes.oneOf(['small', 'middle', 'large']),

  /** The caption or any icon that need to be under the button */
  children: PropTypes.any,

  /** Primary | Secondary */
  type: PropTypes.oneOf(['primary', 'default', 'dashed', 'link', 'text']),

  /** On click method */
  onClick: PropTypes.func,

  /** Control if the button is disabled */
  disabled: PropTypes.bool,

  /** Control if the button is loading */
  loading: PropTypes.bool,

  /** If you need to pass additional classname to the component */
  className: PropTypes.string,

  // You can pass antd icons to the component
  icon: PropTypes.object,

  // You can pass antd custome color to the component
  customColor: PropTypes.string,

  // You can pass antd styles to the component
  style: PropTypes.object,
};

/**
 * Button element that is extending antd . So all its default behaviour is used
 * Refer antd @5.4.2
 *
 * @author Ashique Mohammed
 *
 */
function Button({
  size = 'middle',
  children,
  type = 'primary',
  onClick = () => {},
  disabled,
  loading,

  htmlType,
  className = '',
  icon,
  customColor,
  style = {},
}) {
  const { user, state } = useContext(GlobalContext);
  // useEffect(() => {

  //   // Force a re-render if necessary
  // }, [state.theme.colors]);

  // Define button styles based on the `type` prop
  const getButtonStyles = () => {
    const colors = state?.theme?.colors || {};

    //  managing disable property styles
    if (disabled) {
      if (type === 'primary') {
        return {
          backgroundColor: colors.primaryButtonDisabledBg,
          color: colors.primaryButtonDisabledText,
          cursor: 'not-allowed',
          opacity: 0.6,
        };
      } else if (type === 'default') {
        return {
          backgroundColor: colors.defaultButtonDisabledBg,
          color: colors.defaultButtonDisabledText,
          cursor: 'not-allowed',
          opacity: 0.6,
        };
      } else if (type === 'dashed') {
        return {
          borderColor: colors.dashedButtonDisabledBorder,
          color: colors.dashedButtonDisabledText,
          cursor: 'not-allowed',
          opacity: 0.6,
        };
      } else if (type === 'link' || type === 'text') {
        return {
          color: colors.linkButtonDisabledText,
          cursor: 'not-allowed',
          opacity: 0.6,
        };
      }
    }

    if (type === 'primary') {
      return {
        backgroundColor: colors.primaryButtonBg,
        borderColor: 'transparent',
        color: colors.primaryButtonText,
      };
    } else if (type === 'default') {
      return {
        backgroundColor: colors.defaultButtonBg,
        // borderColor: colors.defaultButtonBorder,
        color: colors.colorDefaultText,
      };
    } else if (type === 'dashed') {
      return {
        borderColor: colors.dashedButtonBorder,
        color: colors.colorDashedText,
      };
    } else if (type === 'link' || type === 'text') {
      return {
        color: colors.linkButtonText,
      };
    }
  };

  return (
    <>
      {/* <AwesomeButton
        type={type}

        // type="primary"
        onPress={onClick}
        htmlType={htmlType}
        loading={loading}

      >

        {children}

        {/* Button */}

      {/* </AwesomeButton> */}

      <ButtonElement
        type={type}
        htmlType={htmlType}
        loading={loading}
        size={size}
        className={`custom-button ${type} ${className}`}
        disabled={disabled}
        onClick={() => {
          onClick();
        }}
        icon={icon}
        style={{
          ...getButtonStyles(),
          ...style, // Allow additional inline styles
        }}
      >
        {children}
      </ButtonElement>
    </>
  );
}

export default Button;
