import { ReactNode } from 'react';

import Flex from '@/common/component/Flex/Flex';

interface ModalBodyProps {
  children: ReactNode;
}

const ModalBody = ({ children }: ModalBodyProps) => (
  <Flex styles={{ direction: 'column', justify: 'flex-start', align: 'center', paddingTop: '2rem', grow: '1' }}>
    {children}
  </Flex>
);

export default ModalBody;

switch (contentType) {
    case 'create-workspace':
      return {
        icon:
          step === totalSteps ? (
            <SuccessIcon width={40} height={40} />
          ) : step && totalSteps ? (
            `${step}/${totalSteps}`
          ) : null,
        title:
          step === 1 || step === 2
            ? '새로운 워크스페이스 생성하기'
            : step === 3
              ? '동아리 프로필 이미지 등록'
              : '워크스페이스 생성완료',
        infoText:
          step === 1
            ? '워크스페이스의 이름을 입력해주세요'
            : step === 2
              ? '팀 카테고리를 선택해주세요'
              : step === 3
                ? '우리 동아리 프로필에 표시할 이미지를 등록해주세요'
                : '이제 워크스페이스를 사용할 수 있습니다.',
      };

switch (contentType) {
    case 'create-workspace':
      return [
        step >= 3 ? { text: '건너뛰기', onClick: buttonClick, variant: 'outline' } : false,
        {
          text: step === 4 ? '확인' : '다음으로',
          onClick: buttonClick,
          variant: 'primary',
          disabled: !isButtonActive,
        },
      ].filter(Boolean) as FooterButton[];

const WorkSpaceName = ({ isVisible }: WorkSpaceNameProps) => {
  const [inputValue, setInputValue] = useState('');
  const { setFormData, nextStep } = useWorkSpaceContext();

  const handleNext = () => {
    setFormData({ name: inputValue });
    nextStep();
  };

  const isButtonActive = inputValue.trim().length > 0;

  return (
    <>
      <Modal.Header step={1} totalSteps={4} />
      <Modal.Body>
        <Input
          placeholder="팀, 동아리, 조직 이름 입력"
          value={inputValue}
          onChange={handleInputChange}
          css={inputWrapperStyle}
        />
      </Modal.Body>
      <Modal.Footer step={1} buttonClick={handleNext} isButtonActive={isButtonActive} />
    </>
  );
};

export default WorkSpaceName;