'use client';

import { memo } from 'react';

import { ActionKeys } from '@/features/ChatInput/ActionBar/config';
import DesktopChatInput, { FooterRender } from '@/features/ChatInput/Desktop';
import { useGlobalStore } from '@/store/global';
import { systemStatusSelectors } from '@/store/global/selectors';

import Footer from './Footer';
import TextArea from './TextArea';
import {useChatStore} from "@/store/chat";

const leftActions = [
  'model',
  'search',
  'fileUpload',
  'knowledgeBase',
  'params',
  'history',
  'stt',
  'tools',
  'mainToken',
] as ActionKeys[];

const rightActions = ['clear'] as ActionKeys[];


const Desktop = memo(() => {
  const [updateInputMessage] = useChatStore((s) => [s.updateInputMessage])
  const [inputHeight, updatePreference] = useGlobalStore((s) => [
    systemStatusSelectors.inputHeight(s),
    s.updateSystemStatus,
  ]);
  const renderTextArea = (onSend: () => void) => <TextArea onSend={onSend} />;
  const renderFooter: FooterRender = ({ expand, onExpandChange }) => (
    <Footer clearClick={() => clearClick()} expand={expand}  onExpandChange={onExpandChange} />
  );

  const clearClick = () => {
    updateInputMessage("")
  }

  return (
    <DesktopChatInput
      inputHeight={inputHeight}
      leftActions={leftActions}
      onInputHeightChange={(height) => {
        updatePreference({ inputHeight: height });
      }}
      renderFooter={renderFooter}
      renderTextArea={renderTextArea}
      rightActions={rightActions}
    />
  );
});

export default Desktop;
