import { setIn } from 'lodash-redux-immutability';

import { useContextSelector } from '@/hooks/useContextSelector';

import CreateFormContext from '../v2/CreateFormContext';
import { CreateModes } from '../v2/types';
import { PromptInputNew } from './PromptInputNew';

export const PromptInputWrapper = () => {
  const simplePrompt = useContextSelector(
    CreateFormContext,
    (ctx) => ctx.state[CreateModes.SIMPLE].prompt
  );
  const setState = useContextSelector(CreateFormContext, (ctx) => ctx.setState);
  const promptInputHeight = useContextSelector(
    CreateFormContext,
    (ctx) => ctx.state[CreateModes.SIMPLE].promptInputHeight
  );

  return (
    <PromptInputNew
      title={'Describe your song'}
      placeholder={''}
      value={simplePrompt}
      onChange={function (val: string): void {
        setState((prevState) =>
          setIn(prevState, [CreateModes.SIMPLE, 'prompt'], val)
        );
      }}
      onClear={function (): void {
        setState((prevState) =>
          setIn(prevState, [CreateModes.SIMPLE, 'prompt'], '')
        );
      }}
      initialHeight={promptInputHeight}
      onHeightChange={(height: number) => {
        setState((prevState) =>
          setIn(prevState, [CreateModes.SIMPLE, 'promptInputHeight'], height)
        );
      }}
    />
  );
};