import React, { useCallback, CSSProperties } from 'react';
import styled from 'styled-components';

/**
 * @param {{
 *  type?: ("primary" | "secondary" | "tertiary"),
 *  text: string,
 *  disabled: boolean,
 *  onClick: Function,
 *  styles: CSSProperties,
 *  icon: {
 *      jsx: typeof HTMLElement,
 *      left: boolean,
 *      right: boolean,
 *      width: number,
 *      height: number,
 *      stroke: string
 *  }
 * }} props - properties of Button Component
 *
 */
const ButtonComponent = (props) => {
  // Fix: Add props.onClick to the dependency array
  const handleClick = useCallback(
    (e) => {
      props.onClick && props.onClick(e);
    },
    [props.onClick],
  ); // Dependency array now includes props.onClick
  // //console.log(props);
  switch (props.type) {
    case 'primary':
      return (
        <Button
          disabled={props.disabled}
          onClick={handleClick}
          style={props.styles}
        >
          {props.icon?.left && props.icon.jsx ? (
            <props.icon.jsx
              {...{
                width: props.icon.width,
                height: props.icon.height,
                stroke: props.icon.stroke,
              }}
            />
          ) : (
            props.icon?.left && (
              <TestIcon
                {...{
                  width: props.icon.width,
                  height: props.icon.height,
                  stroke: props.icon.stroke,
                }}
              />
            )
          )}
          {props.text ?? 'Text'}
          {props.icon?.right && props.icon.jsx ? (
            <props.icon.jsx
              {...{
                width: props.icon.width,
                height: props.icon.height,
                stroke: props.icon.stroke,
              }}
            />
          ) : (
            props.icon?.right && (
              <TestIcon
                {...{
                  width: props.icon.width,
                  height: props.icon.height,
                  stroke: props.icon.stroke,
                }}
              />
            )
          )}
        </Button>
      );
    case 'secondary':
      return (
        <SecondaryButton
          disabled={props.disabled}
          onClick={handleClick}
          style={props.styles}
        >
          {props.icon?.left && props.icon.jsx ? (
            <props.icon.jsx
              {...{
                width: props.icon.width,
                height: props.icon.height,
                stroke: props.icon.stroke,
              }}
            />
          ) : (
            props.icon?.left && (
              <TestIcon
                {...{
                  width: props.icon.width,
                  height: props.icon.height,
                  stroke: props.icon.stroke,
                }}
              />
            )
          )}
          {props.text ?? 'Text'}
          {props.icon?.right && props.icon.jsx ? (
            <props.icon.jsx
              {...{
                width: props.icon.width,
                height: props.icon.height,
                stroke: props.icon.stroke,
              }}
            />
          ) : (
            props.icon?.right && (
              <TestIcon
                {...{
                  width: props.icon.width,
                  height: props.icon.height,
                  stroke: props.icon.stroke,
                }}
              />
            )
          )}
        </SecondaryButton>
      );
    case 'tertiary':
      return (
        <TertiaryButton
          disabled={props.disabled}
          onClick={handleClick}
          style={props.styles}
        >
          {props.icon?.left && props.icon.jsx ? (
            <props.icon.jsx
              {...{
                width: props.icon.width,
                height: props.icon.height,
                stroke: props.icon.stroke,
              }}
            />
          ) : (
            props.icon?.left && (
              <TestIcon
                {...{
                  width: props.icon.width,
                  height: props.icon.height,
                  stroke: props.icon.stroke,
                }}
              />
            )
          )}
          {props.text ?? 'Text'}
          {props.icon?.right && props.icon.jsx ? (
            <props.icon.jsx
              {...{
                width: props.icon.width,
                height: props.icon.height,
                stroke: props.icon.stroke,
              }}
            />
          ) : (
            props.icon?.right && (
              <TestIcon
                {...{
                  width: props.icon.width,
                  height: props.icon.height,
                  stroke: props.icon.stroke,
                }}
              />
            )
          )}
        </TertiaryButton>
      );
    default:
      return (
        <Button
          disabled={props.disabled}
          onClick={handleClick}
          style={props.styles}
        >
          {props.icon?.left && props.icon.jsx ? (
            <props.icon.jsx
              {...{
                width: props.icon.width,
                height: props.icon.height,
                stroke: props.icon.stroke,
              }}
            />
          ) : (
            props.icon?.left && (
              <TestIcon
                {...{
                  width: props.icon.width,
                  height: props.icon.height,
                  stroke: props.icon.stroke,
                }}
              />
            )
          )}
          {props.text ?? 'Text'}
          {props.icon?.right && props.icon.jsx ? (
            <props.icon.jsx
              {...{
                width: props.icon.width,
                height: props.icon.height,
                stroke: props.icon.stroke,
              }}
            />
          ) : (
            props.icon?.right && (
              <TestIcon
                {...{
                  width: props.icon.width,
                  height: props.icon.height,
                  stroke: props.icon.stroke,
                }}
              />
            )
          )}
        </Button>
      );
  }
};
export default ButtonComponent;
const Button = styled.button`
  padding: 9px 40px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid transparent;
  background-color: #febf10;
  color: #ffffff;
  transition: 0.5s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  &:hover {
    background-color: #e5ad0e;
    border-color: transparent;
  }
  &:disabled {
    background-color: #c6cccc;
    cursor: not-allowed;
  }
  & svg {
    & path {
      stroke: white;
    }
  }
`;
const SecondaryButton = styled(Button)`
  background-color: #ffffff;
  color: #febf10;
  border: 1px solid #febf10;
  &:hover {
    background-color: #ffffff;
    color: #e5ad0e;
    border-color: #e5ad0e;
    & svg {
      & path {
        stroke: #e5ad0e;
      }
    }
  }
  &:disabled {
    background-color: #ffffff;
    color: #c6cccc;
    border-color: #c6cccc;
    & svg {
      & path {
        stroke: #c6cccc;
      }
    }
  }
  & svg {
    & path {
      stroke: #febf10;
    }
  }
`;
const TertiaryButton = styled(Button)`
  &:hover {
    background-color: #ffffff;
    color: #febf10;
    border: 1px solid #febf10;
    & svg {
      & path {
        stroke: #febf10;
      }
    }
  }
  &:disabled {
    border-color: #7c8080;
    color: #7c8080;
    background-color: #ffffff;
    & svg {
      & path {
        stroke: #7c8080;
      }
    }
  }
`;
const TestIcon = ({ stroke, ...props }) => {
  return (
    <Svg xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        d="M17 20.5H7C4 20.5 2 19 2 15.5V8.5C2 5 4 3.5 7 3.5H17C20 3.5 22 5 22 8.5V15.5C22 19 20 20.5 17 20.5"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M17 9L13.87 11.5C12.84 12.32 11.15 12.32 10.12 11.5L7 9"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </Svg>
  );
};
const Svg = styled.svg.attrs((props) => {
  return {
    width: props.width ?? 24,
    height: props.height ?? 24,
    fill: props.fill ?? 'none',
  };
})`
  transition: 0.5s;
`;
