/*
  Demonstrates an HOC without generics, leading to prop type loss.
  The WrappedComponent's specific props are not carried through,
  making the returned component's props effectively 'any' or ill-defined.
*/

import React from 'react';

// 1. Define a basic component with specific props
interface UserProfileProps {
  userId: string;
  userName: string;
  isAdmin: boolean;
}

const UserProfile: React.FC<UserProfileProps> = ({ userId, userName, isAdmin }) => {
  return (
    <div>
      <h2>User Profile</h2>
      <p>ID: {userId}</p>
      <p>Name: {userName}</p>
      <p>Admin: {isAdmin ? 'Yes' : 'No'}</p>
    </div>
  );
};

// 2. Define a simple HOC that *intends* to wrap any component
//    Notice the lack of generics – this is the core of the problem.
function withLogger(WrappedComponent: React.ComponentType<any>) {
  // HOC adds a logging feature
  return class WithLogger extends React.Component<any> {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.displayName || WrappedComponent.name} mounted.`);
    }

    render() {
      // The props passed here are implicitly 'any' or poorly typed
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 3. Apply the HOC
const LoggedUserProfile = withLogger(UserProfile);

// 4. Usage example (in a real app, this would be within JSX)
//    Notice TypeScript cannot enforce UserProfileProps on LoggedUserProfile
//    because the HOC has lost that type information.
//    If you try to use LoggedUserProfile, you'll see its props are 'any'.
//    LoggedUserProfile({ userId: '123', userName: 'John Doe' }); // No type error for missing 'isAdmin'
//    LoggedUserProfile({ userId: '123', userName: 'John Doe', isAdmin: true, extraProp: 'oops' }); // No type error for 'extraProp'

// How to use it in a React app (conceptual, not runnable standalone as JSX):
/*
const App = () => (
  <LoggedUserProfile userId="456" userName="Jane Smith" isAdmin={false} />
);
*/

// To see the type issue directly in an editor, hover over 'LoggedUserProfile'
// It will likely show 'React.ComponentClass<any, any>' or similar, 
// indicating the specific props of UserProfileProps are lost.

export { UserProfile, withLogger, LoggedUserProfile };

/*
  Demonstrates an HOC refactored with TypeScript Generics to correctly
  preserve and infer prop types from the wrapped component.
  This ensures type safety when using the HOC-enhanced component.
*/

import React from 'react';

// 1. Re-use the basic component with specific props from previous example
interface UserProfileProps {
  userId: string;
  userName: string;
  isAdmin: boolean;
}

const UserProfile: React.FC<UserProfileProps> = ({ userId, userName, isAdmin }) => {
  return (
    <div>
      <h2>User Profile</h2>
      <p>ID: {userId}</p>
      <p>Name: {userName}</p>
      <p>Admin: {isAdmin ? 'Yes' : 'No'}</p>
    </div>
  );
};

// 2. Define the HOC with Generics
//    <P> is a type parameter that represents the props of the WrappedComponent.
//    We constrain P to be an object type, ensuring it can receive prop keys.
//    The HOC now correctly captures the props of the component it wraps.
function withLogger<P extends object>(WrappedComponent: React.ComponentType<P>) {

  // Define the return type of the HOC. It will be a functional component
  // that accepts the same props <P> as the WrappedComponent.
  // This ensures prop types are forwarded.
  const ComponentWithLogger: React.FC<P> = (props) => {
    // Effect for logging mount (mimicking componentDidMount in a functional component)
    React.useEffect(() => {
      console.log(`Component ${WrappedComponent.displayName || WrappedComponent.name} mounted.`);
    }, []); // Empty dependency array means this runs once on mount

    // Render the WrappedComponent, passing all its original props.
    return <WrappedComponent {...props} />;
  };

  // Assign a display name for easier debugging in React DevTools
  ComponentWithLogger.displayName = `withLogger(${WrappedComponent.displayName || WrappedComponent.name})`;

  return ComponentWithLogger;
}

// 3. Apply the HOC again
const LoggedUserProfile = withLogger(UserProfile);

// 4. Usage example (in a real app, this would be within JSX)
//    Now, TypeScript correctly infers UserProfileProps for LoggedUserProfile.
//    Attempting to omit 'isAdmin' will result in a compile-time error.
//    Attempting to add 'extraProp' will also result in a compile-time error.

//    Example of correct usage:
//    <LoggedUserProfile userId="123" userName="John Doe" isAdmin={true} />

//    Example of incorrect usage (will show a TypeScript error):
//    <LoggedUserProfile userId="123" userName="John Doe" /> // Error: Property 'isAdmin' is missing
//    <LoggedUserProfile userId="123" userName="John Doe" isAdmin={true} extraProp="test" /> // Error: 'extraProp' does not exist

export { UserProfile, withLogger, LoggedUserProfile };

/*
  Demonstrates an advanced HOC that injects new props AND forwards a ref,
  using TypeScript Generics and utility types (Omit, ComponentProps).
  This showcases how to manage multiple sets of props (original and injected)
  and maintain ref access while preserving type safety.
*/

import React from 'react';

// 1. Define a component that needs some data and can receive a ref
interface DisplayDataProps {
  data: string;
  label: string;
  onClick: (value: string) => void;
}

// We use React.forwardRef to allow the component to receive a ref
const DisplayData = React.forwardRef<HTMLButtonElement, DisplayDataProps>(
  ({ data, label, onClick }, ref) => {
    console.log('Rendering DisplayData with data:', data);
    return (
      <button ref={ref} onClick={() => onClick(data)}>
        {label}: {data}
      </button>
    );
  }
);

DisplayData.displayName = 'DisplayData';

// 2. Define the HOC that injects 'apiData' and exposes a 'loadData' function
//    It also forwards the ref to the wrapped component.

interface WithDataProps {
  apiData: string; // New prop injected by the HOC
  loadData: () => void; // New function injected by the HOC
}

// Define the HOC's signature using generics:
// <P> represents the original props of the WrappedComponent.
// We use Omit to remove props that the HOC will inject from the outward props.
// The ref type <R> is also generic, allowing us to forward specific ref types.
function withApiData<P extends WithDataProps, R extends React.Ref<any>>(
  WrappedComponent: React.ComponentType<P> & React.RefAttributes<R>
) {
  // The component returned by the HOC will expect props *excluding* WithDataProps
  // because the HOC provides them internally. It also receives a ref.
  const ComponentWithApiData = React.forwardRef<
    R,
    Omit<P, keyof WithDataProps>
  >((props, ref) => {
    const [data, setData] = React.useState('initial data');

    const loadData = () => {
      console.log('Simulating API call...');
      setTimeout(() => {
        setData(`fetched data (${Math.random().toFixed(2)})`);
      }, 1000);
    };

    React.useEffect(() => {
      loadData(); // Load data on mount
    }, []);

    // Render the WrappedComponent, merging original props with injected props
    return (
      <WrappedComponent
        {...(props as P)} // Cast is safe because WithDataProps are added here
        apiData={data}
        loadData={loadData}
        ref={ref}
      />
    );
  });

  ComponentWithApiData.displayName = `withApiData(${WrappedComponent.displayName || WrappedComponent.name})`;
  return ComponentWithApiData;
}

// 3. Apply the HOC to DisplayData
//    Note: DisplayDataProps MUST extend WithDataProps for the HOC to be applicable
//    If DisplayData did not expect `apiData` and `loadData`, TypeScript would complain here.
interface ExtendedDisplayDataProps extends DisplayDataProps, WithDataProps {}

// We need to ensure DisplayData is cast correctly to match the HOC's expectation
// that the WrappedComponent accepts the *injected* props.
// In a real scenario, DisplayData would be designed to accept these, or we'd transform props.
const DisplayDataExpectingInjected = DisplayData as React.ComponentType<ExtendedDisplayDataProps> & React.RefAttributes<HTMLButtonElement>;

const EnhancedDisplayData = withApiData(DisplayDataExpectingInjected);

// 4. Usage example (in a real app, within JSX)
//    Notice EnhancedDisplayData now correctly expects only the *original* props
//    of DisplayData, MINUS the ones injected by withApiData.

const AppWrapper = () => {
  const buttonRef = React.useRef<HTMLButtonElement>(null);

  const handleClick = (value: string) => {
    console.log('Button clicked with value:', value);
  };

  return (
    <div>
      <h1>HOC with Injected Props and Ref Forwarding</h1>
      <EnhancedDisplayData
        label="API Result"
        onClick={handleClick}
        ref={buttonRef}
      />
      <button onClick={() => buttonRef.current?.focus()}>Focus Button</button>
    </div>
  );
};

// To run this in a React app:
// ReactDOM.render(<AppWrapper />, document.getElementById('root'));

export { DisplayData, withApiData, EnhancedDisplayData, AppWrapper };

/*
  Illustrates a common pitfall: incorrect generic usage leading to partial type loss.
  It shows how a generic HOC might still expose too many internal types or require too much
  from the consumer if not designed carefully. Then, demonstrates a correct approach.
*/

import React from 'react';

// 1. Original Component
interface MessageDisplayProps {
  message: string;
  color: string;
}

const MessageDisplay: React.FC<MessageDisplayProps> = ({ message, color }) => (
  <p style={{ color }}>{message}</p>
);
MessageDisplay.displayName = 'MessageDisplay';

// 2. PITFALL: HOC with overly complex or incorrect generic signature
//    This HOC *intends* to add an 'emoji' prop, but its generic type
//    is making assumptions about the WrappedComponentProps that might not hold.
//    It might inadvertently *require* the WrappedComponent to already have 'emoji'.

interface WithEmojiProps {
  emoji: string; // HOC will provide this
}

// Pitfall HOC: The generic <P> should represent the *original* props of the WrappedComponent.
// However, if we don't handle the injection correctly, <P> might include 'emoji'
// leading to a mismatch or forcing the base component to accept 'emoji'.
// A common error is: function withEmojiBad<P extends WithEmojiProps>(...)
// This forces the *input* component to already accept `emoji`.

function withEmojiBad<P>(WrappedComponent: React.ComponentType<P>) {
  // Problem: The HOC adds `emoji` to the props it passes to WrappedComponent,
  // but the external interface of the HOC still expects `P`.
  // It's not clear how `emoji` is managed or if the outer component should pass it.
  // This version implies `P` should already include `emoji` for the `WrappedComponent`.
  const ComponentWithEmoji: React.FC<P> = (props) => {
    const injectedEmoji = '✨'; // HOC-provided prop
    return <WrappedComponent {...props} {...{ emoji: injectedEmoji as any }} />;
  };
  ComponentWithEmoji.displayName = `withEmojiBad(${WrappedComponent.displayName || WrappedComponent.name})`;
  return ComponentWithEmoji;
}

// If we apply it like this, TypeScript might not complain unless `MessageDisplay`
// explicitly does *not* have an 'emoji' prop, but the type for `BadEmojiDisplay`
// would still be `MessageDisplayProps`, which is wrong because the HOC adds `emoji`.
// const BadEmojiDisplay = withEmojiBad(MessageDisplay);
// <BadEmojiDisplay message="Hello" color="blue" /> // 'emoji' is implicitly passed, but not typed.


// 3. BEST PRACTICE: HOC with clear prop separation and generic inference
//    This HOC correctly separates the WrappedComponent's original props (WrappedProps)
//    from the props it injects (InjectedProps) and the props it expects from its consumer (OutwardProps).

interface InjectedEmojiProps {
  emoji: string; // The HOC injects this prop
}

// <WrappedProps> are the props the original component (MessageDisplay) expects.
// The HOC will return a component that expects <OutwardProps>.
function withEmojiGood<WrappedProps extends object>(
  WrappedComponent: React.ComponentType<WrappedProps & InjectedEmojiProps>
) {
  // The returned component will accept all of WrappedProps, *minus* the injected ones.
  type OutwardProps = Omit<WrappedProps, keyof InjectedEmojiProps>;

  const ComponentWithEmoji: React.FC<OutwardProps> = (props) => {
    const injectedEmoji = '🌟'; // HOC-provided prop

    // Cast 'props' to 'WrappedProps' is safe here because we are adding the missing 'InjectedEmojiProps'
    // before passing them to the WrappedComponent.
    return (
      <WrappedComponent
        {...(props as WrappedProps)}
        emoji={injectedEmoji}
      />
    );
  };
  ComponentWithEmoji.displayName = `withEmojiGood(${WrappedComponent.displayName || WrappedComponent.name})`;
  return ComponentWithEmoji;
}

// 4. Applying the Best Practice HOC
//    We need to define a type that is the combination of MessageDisplay's props
//    and the injected props, because the WrappedComponent *inside* the HOC needs them.
interface MessageDisplayWithEmojiProps extends MessageDisplayProps, InjectedEmojiProps {}

// We must cast MessageDisplay to this combined type, indicating it *can* accept 'emoji'.
const MessageDisplayPrepared = MessageDisplay as React.ComponentType<MessageDisplayWithEmojiProps>;

const GoodEmojiDisplay = withEmojiGood(MessageDisplayPrepared);

// 5. Usage of Best Practice HOC
//    GoodEmojiDisplay correctly expects only MessageDisplayProps.
//    'emoji' is automatically provided by the HOC.

// <GoodEmojiDisplay message="Hello from HOC!" color="green" />
// This is type-safe and clear. Trying to pass `emoji` here would be an error.

const App = () => (
  <div>
    <h3>Bad HOC Usage (Conceptual - would have type issues)</h3>
    {/* <BadEmojiDisplay message="Bad" color="red" /> */}
    <h3>Good HOC Usage</h3>
    <GoodEmojiDisplay message="Hello from HOC!" color="green" />
  </div>
);

export { MessageDisplay, withEmojiBad, withEmojiGood, GoodEmojiDisplay, App };