'use client';
import React, { useState } from 'react';
import { Steps, Button, Modal } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import AddEditProject from '../components/AddEditProject';
import MarketingChannels from '../components/MarketingChannels';
import PageHeader from '@/components/pageHeader';
import { useRouter } from 'next/navigation';

const { Step } = Steps;

const AddProject = () => {
  const router = useRouter();
  const [currentStep, setCurrentStep] = useState(0);
  const [showProjects, setShowProjects] = useState(false);
  const [modalVisible, setModalVisible] = useState(false);
  const [projectID, setProjectID] = useState<number>();

  const handlePrev = (): void => {
    router.push(`/launches/edit-project?id=${projectID}`);
  };
  const handleSave = (newProjectId?: number): void => {
    if (newProjectId !== undefined) {
      setProjectID(newProjectId);
    }
    if (currentStep === 0) {
      setCurrentStep(currentStep + 1);
      setShowProjects(true);
    } else if (currentStep === 1) {
      setModalVisible(true);
    }
  };

  const handleModalOk = (): void => {
    setModalVisible(false);
  };

  return (
    <div>
      <PageHeader title="Create New Project"
        onBack={() =>router.push('/launches?Projects=1') }

      />
      <Steps
        current={currentStep}
        size="small"
        style={{ maxWidth: '500px', margin: '0 auto 29px auto' }}>
        <Step title="Project Details" />
        <Step title="Marketing Channels" />
      </Steps>
      <div style={{ position: 'relative' }}>
        {currentStep === 0 && <AddEditProject onNext={handleSave} />}
        {currentStep === 1 && <MarketingChannels projectID={projectID}/>}
        {showProjects && currentStep === 1}
        {currentStep > 0 && (
          <div style={{ position: 'absolute', bottom: '23px', left: '24px' }}>
            <Button
              type="primary"
              ghost
              style={{ marginRight: '8px' }}
              onClick={handlePrev}
              icon={<ArrowLeftOutlined />}>
                            Previous
            </Button>
          </div>
        )}
      </div>

      <Modal
        title="Success"
        open={modalVisible}
        onOk={handleModalOk}
        onCancel={handleModalOk}
        okText="Ok"
        closable={false}>
                Data saved successfully!
      </Modal>
    </div>
  );
};

export default AddProject;