'use client';

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

const { Step } = Steps;

const EditUEmployeePage: React.FC = () => {
  const router = useRouter();
  const [currentStep, setCurrentStep] = useState(0);
  const [showProjects, setShowProjects] = useState<boolean>(false);
  const [modalVisible, setModalVisible] = useState<boolean>(false);

  const searchParams = useSearchParams();
  const id = searchParams.get('id');
  const parsedId = id !== null && id !== undefined ? parseInt(id, 10) : undefined;

  const handlePrev = (): void => {
    setCurrentStep(currentStep - 1);
  };
  const handleSave = (): void => {
    if (currentStep === 0) {
      setCurrentStep(currentStep + 1);
      setShowProjects(true);
    } else if (currentStep === 1) {
      setModalVisible(true);
    }
  };

  const handleModalOk = (): void => {
    setModalVisible(false);
  };
  return (
    <div>
      <PageHeader
        title='Edit 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 id={parsedId} onNext={handleSave} />}
        {currentStep === 1 && <MarketingChannels projectID={parsedId} />}
        {showProjects && currentStep === 1}
        {currentStep > 0 && (
          <div style={{ position: 'absolute', bottom: '25px', 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 EditUEmployeePage;