import React from 'react';
import {useTranslation} from 'react-i18next';
import {NewPost, Stepper} from '@components';
import {Step} from '@components/_HuGo/Stepper/interfaces';
import {
  NewPostScreens,
  NewPostStack,
} from '@components/_custom/NewPost/navigation';
import {useGoBack} from '@hooks/useGoBack';

import {StepIds} from '../../interfaces';
import {SelectAuthor} from './components/SelectAuthor';
import {Destiny} from './components/Destiny';
import {CreatePost} from './components/CreatePost';

export const STEPS: Step[] = [
  {
    id: StepIds.SELECT_AUTHOR,
    component: SelectAuthor,
  },
  {
    id: StepIds.SELECT_GROUP,
    component: Destiny,
  },
  {
    id: StepIds.CREATE_POST,
    component: CreatePost,
  },
];

function StepperComponent() {
  const {t} = useTranslation();
  const {goBack} = useGoBack();
  return (
    <Stepper
      steps={STEPS}
      title={t('drafts.main.create_draft')}
      onClose={goBack}>
      <Stepper.Content>
        <Stepper.Header />
        <Stepper.ProgressBar />
        <Stepper.ScreenStack />
      </Stepper.Content>
      <Stepper.Footer showContinueButton />
    </Stepper>
  );
}

function NewDrafts() {
  return (
    <NewPost>
      <NewPost.Navigator>
        <NewPostStack.Screen
          options={{headerShown: false}}
          name={NewPostScreens.NewPostMain}
          component={StepperComponent}
        />
      </NewPost.Navigator>
    </NewPost>
  );
}

export default NewDrafts;