FLUENT UI FORM

import './CreateBusinessObjective.css';
import Upload from '../../common/FileUpload/Upload';
import info from "../../assets/images/Info.svg"

import { useEffect, useState } from 'react';
import { DefaultButton, Dropdown, DropdownMenuItemType, Icon, Label, PrimaryButton, Stack, TextField } from '@fluentui/react';

import FileUpload from '../../common/FileUpload/FileUpload';

import React from 'react';
import { getAllBusinessObjectiveOptions } from '../../service/BusinessObjectiveServices';
import { Logger } from '@azure/msal-browser';



interface Field {
  label: string;
  value: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLSelectElement>) => void;
  placeholder?: string;
  options?: string[];
}

interface CreateBusinessObjectiveProps {
  isOpen: boolean;
  onClose: () => void;
  assetId?:string
}

const formTokens = { childrenGap: 2 };
const buttonStackTokens = { childrenGap: 1 };

const dropdownControlledExampleOptions = [
  { key: '1998', text: '1998', itemType: DropdownMenuItemType.Header },
  { key: '1999', text: '1999' },
  { key: '2000', text: '2000' },
  { key: '2001', text: '2001' }
];


const CreateBusinessObjective: React.FC<CreateBusinessObjectiveProps> = ({ isOpen, onClose,assetId }) => {}
  const [objectiveName, setObjectiveName] = useState<string>('');
  const [selectedOption, setSelectedOption] = useState<string>('');
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
  const [ objectiveOptions, setObjectiveOptions ] = useState({
    fiscalYearOptions: [],
    ownerOptions: [],
    csaOptions: [],
    industryOptions: [],
    geoOuOptions: [],
    segmentOptions: []
  })



  const [formState , setFormState]: any = useState({

    businessObjectives: '',
    fiscalYear: undefined,
    owner: undefined,
    kpi: '',
    csa: undefined,
    industry: undefined,
    geoOu: undefined,
    segment: undefined,
  });

  const handleInputChange = (field : any, value : any) => {
    setFormState((prevState : any) => ({ ...prevState, [field]: value }));
  };

  const handleSubmit = () => {
    const formData = {
      businessObjectives: formState.businessObjectives,
      fiscalYear: formState.fiscalYear ? formState.fiscalYear.key : '',
      owner: formState.owner ? formState.owner.key : '',
      kpi: formState.kpi,
      csa: formState.csa ? formState.csa.key : '',
      industry: formState.industry ? formState.industry.key : '',
      geoOu: formState.geoOu ? formState.geoOu.key : '',
      segment: formState.segment ? formState.segment.key : ''
    };


    console.log('Form Data:', formData);
    // Process formData here, e.g., send to an API or update the state
    // call API for post data here
  };

  useEffect(() => {
    try {
      const objectiveOptions = getAllBusinessObjectiveOptions();
      objectiveOptions.then((data) => { console.log(data) })
      setObjectiveOptions((prevState) => ({
        ...prevState,
        fiscalYearOptions: data.fiscalYear.length ? data.fiscalYear.map((option) => { return { text: option.name, key: option.value } }) : [],
        ownerOptions: data.owner.length ? data.owner.map((option) => { return { text: option.name, key: option.value } }) : [],
        csaOptions: data.solutionAreas.length ? data.solutionAreas.map((option) => { return { text: option.name, key: option.value } }) : [],
        industryOptions: data.industry.length ? data.industry.map((option) => { return { text: option.name, key: option.value } }) : [],
        geoOuOptions: data.geography.length ? data.geography.map((option) => { return { text: option.name, key: option.value } }) : [],
        segmentOptions: data.segment.length ? data.segment.map((option) => { return { text: option.name, key: option.value } }): []
      }))
    } catch (error) {
      console.log(error)
    }
  },[])

  return (
    <>
      {isOpen && (
        <div className="overlay" ></div>
      )}
      <div className={`sidebar ${isOpen ? 'open' : ''}`}>

        {/* <div style={{ display: 'flex', justifyContent: 'space-between', height: '56px', }}></div> */}
        <div style={{ display: 'flex', justifyContent: 'space-between' ,height:'56px' ,width:'292px',padding:'20px 0 24px 0'}}>

          <div style={{ fontWeight: 600, fontSize: '20px', lineHeight:'28px', color:'#323130'}}>
            {assetId?'Edit Additional Business Objective':'Add Additional Business Objective'}</div>
          <div style={{ lineHeight:'32px'}}>
            <Icon iconName="ChromeClose" className="close-icon" onClick={onClose} />
          </div>
        </div>

          <div  style={{width:'292px',padding:'20px 0 24px 0'}}>
          <Stack tokens={formTokens}>
      <TextField
        label="Business Objectives*"
        placeholder="Enter Business Objectives"
        value={formState.businessObjectives}
        onChange={(e, newValue) => handleInputChange('businessObjectives', newValue)}
      />
      <Dropdown
        label="Fiscal Year*"
        selectedKey={formState.fiscalYear ? formState.fiscalYear.key : undefined}
        onChange={(event, item) => handleInputChange('fiscalYear', item)}
        placeholder="Select Fiscal Year"
        options={objectiveOptions.fiscalYearOptions}
      /><Dropdown
      label="Owner"
      selectedKey={formState.owner ? formState.owner.key : undefined}
      onChange={(event, item) => handleInputChange('owner', item)}
      placeholder="Select Owner"
      options={objectiveOptions.ownerOptions}
    />
    <TextField
      label="KPI"
      placeholder="Enter KPI"
      value={formState.kpi}
      onChange={(e, newValue) => handleInputChange('kpi', newValue)}
    />
    <Dropdown
      label="CSA*"
      selectedKey={formState.csa ? formState.csa.key : undefined}
      onChange={(event, item) => handleInputChange('csa', item)}
      placeholder="Select CSA"
      options={objectiveOptions.csaOptions}
    />
    <Dropdown
      label="Industry"
      selectedKey={formState.industry ? formState.industry.key : undefined}
      onChange={(event, item) => handleInputChange('industry', item)}
      placeholder="Select Industry"
      options={objectiveOptions.industryOptions}
    />
    <Dropdown
      label="GEO/OU"
      selectedKey={formState.geoOu ? formState.geoOu.key : undefined}
      onChange={(event, item) => handleInputChange('geoOu', item)}
      placeholder="Select GEO/OU"
      options={objectiveOptions.geoOuOptions}
    />
    <Dropdown
      label="Segment"
      selectedKey={formState.segment ? formState.segment.key : undefined}
      onChange={(event, item) => handleInputChange('segment', item)}
      placeholder="Select Segment"
      options={objectiveOptions.segmentOptions}
    />
    {/* <Stack horizontal tokens={buttonStackTokens}>
      <PrimaryButton text="Save" onClick={handleSubmit} allowDisabledFocus />
      <DefaultButton text="Cancel" allowDisabledFocus />
    </Stack> */}
  </Stack>
    </div>
    <div  className="divider" />

    <div className='attachments'> Attachments</div>
          <div className='info'>
           <img src={info}  style={{height:'12px',width:'12px',paddingRight:'2px'}}/>


            <div className='max-size-text'>Maximum size allowed for each file is 100 MB</div>
          </div>

          <FileUpload setSelectedFiles={setSelectedFiles} selectedFiles={selectedFiles} />
          <div style={{ display: 'flex', gap: 10, alignItems: 'center',marginTop:'24px' ,width:'242px'}}>

            <PrimaryButton onClick={() =>{} }>
               {assetId?'Update':'Save'}
            </PrimaryButton>
              <DefaultButton
                 onClick={onClose}>
                           Cancel
              </DefaultButton>
          </div>

        </div>

    </>
  );

export default CreateBusinessObjective;