Untitled

import React, { useState, useEffect } from 'react';
import { Link } from "react-router-dom";
import Sidebar from '../Sidebar';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import TextareaAutosize from '@mui/material/TextareaAutosize';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import Autocomplete from '@mui/material/Autocomplete';
import DropFilePDF from './DropFilePDF';
import DropFileMP3 from './DropFileMP3';

import UploadIcon from '../assets/iconos_upload_24px.svg';
import { Generos } from '../Constants/Generos';
import { Idiomas } from '../Constants/Idiomas';
import { Roles } from '../Constants/Roles';
import { Titulo } from '../Constants/Titulo';
import axios from 'axios';

const Form = () => {

    // change to useParams
    const submittingAgency = 100;

    let today = new Date().toISOString().slice(0, 10);

    const [fileHeader, setHeader] = useState({
        submittingAgency: submittingAgency,
        fileCreationDateTime: new Date(),
        receivingAgency: 61
    });
   
    const [addWorks, setData] = useState({
        submissionId: 1,
        agency: submittingAgency,
        originalTitle: "",
        albumTitle: "",
        duration: "00:00",
        genre: "",
        unpublishedDndaNumberLetter: 0,
        unpublishedDndaNumberMusic: 0,
        unpublishedDate: today,
        editedDate: today,
        lyrics: "",
        interestedParties:[
            {
            nameNumber: "",
            role: "",
            porcentPer: 0,
            fullName: "",
            dni: ""
            },
            {
            nameNumber: "",
            role: "",
            porcentPer: 0,
            fullName: "",
            dni: ""
            },
            {
            nameNumber: "",
            role: "",
            porcentPer: 0,
            fullName: "",
            dni: ""
            },
            {
            nameNumber: "",
            role: "",
            porcentPer: 0,
            fullName: "",
            dni: ""
            }
        ]
    });

    const [interestedParties, setState] = useState([]);

    const handleInputChange = (e, index) => {
        const { name, value } = e.target;
        const list = [...addWorks.interestedParties];
        list[index][name] = value;
        setState(list);
    };

    const [audioFile, setDocuments] = useState('');
    const [sheetMusicFile, setDocuments2] = useState('');

    const handleInputsChange = (event) => {

        const value = event.target.value;

        setData({
            ...addWorks,
            [event.target.name]: value
        });

    };
     
    const sum = [parseInt(addWorks.interestedParties[0].porcentPer), 
                 parseInt(addWorks.interestedParties[1].porcentPer), 
                 parseInt(addWorks.interestedParties[2].porcentPer), 
                 parseInt(addWorks.interestedParties[3].porcentPer)].reduce((a, b) => a + b, 0);

    const handleSubmit = async (e) => {


        e.preventDefault();
    
    
        //setLoading(true)
    
    
        const body = { 
            fileHeader,
            addWorks:[addWorks]            
        };    

        const send = JSON.stringify(body)
        
        const upload = {
            body: send,
            songs: audioFile,
            documents: sheetMusicFile
        }
        
        const formData = new FormData()

        for (const property in upload) {
            formData.append(
                property, upload[property]
            )
        }

      
        if(addWorks.interestedParties[0].porcentPer == ""){
            alert('Por favor agregar datos de integrantes')
        }else if(sum !== 100 ){
            alert('Por favor chequear distrubucion porcentajes')
    
        }else if(audioFile == "" ){
            alert('Por favor agregar archivo de partitura y archivo de audio')
    
        }else{
            

            try {
                const resp = await axios.post('http://localhost:3001/api/uploads', formData, {
                    headers: { 
                        "Content-Type": "application/json", 
                    },
                });
        
                console.log(resp);
                alert('Carga enviada!')
            } catch (err) {
                // Handle Error Here
                console.log(err);
            }

            


        }


                
    }; 


 

  return (
    <>
        <Sidebar/>
        <form onSubmit={handleSubmit} className='frame'>
        <br />
        <div className='d-flex justify-content-between align-items-center'>
            <h2 className='title' style={{ marginBottom: '0' }}>Registro de obras</h2>
      
        </div>

        <hr />

        {/* addWorks (addWorks) */}


        <div className='row px-2'>

            <div className='col-xs-12 col-md-4'>

                <p className='fw-bold'>Trámite# </p>

                <p className='subtitle fw-bold'>Titulo original de la obra*</p>

                <p className='subtitle fw-bold mt-5 mb-5'>Titulo de la obra*</p> 

                <p className='subtitle fw-bold mt-5 mb-5'>Duración</p>  

                <p className='subtitle fw-bold mb-5' style={{marginTop: '60px'}}>Género</p>  
    
                <p className='subtitle fw-bold mb-5' style={{marginTop: '65px'}}>DNDA Expediente N (Letra)</p>  

                <p className='subtitle fw-bold mt-5'>DNDA Expediente N (Musica)</p>  
    
            </div>

            <div className='col-xs-12 col-md-4'>
                <p className='fw-bold'>{submittingAgency}</p>

                <TextField
                    required
                    name='originalTitle'
                    value={addWorks.originalTitle}
                    onChange={handleInputsChange}
                    label="Nombre"
                    style={{ width: '100%' }}
                />

                <br />
                <br />

                <TextField
                    required
                    name='albumTitle'
                    value={addWorks.albumTitle}
                    onChange={handleInputsChange}
                    label="Nombre"
                    style={{ width: '100%' }}
                />

                <br />
                <br />

                <TextField
                    required
                    type='time'
                    name='duration'
                    value={addWorks.duration}
                    onChange={handleInputsChange}
                    label="duración"
                    style={{ width: '100%' }}
                />

                <br />
                <br />



                <FormControl style={{width: '100%'}}>
                    <InputLabel id="demo-simple-select-label">género</InputLabel>
                    <Select
                        defaultValue= ""
                        required        
                        name='genre'
                        labelId="demo-simple-select-label"
                        id="demo-simple-select"
                        value={addWorks.genre}
                        label="género"
                        onChange={handleInputsChange}
                        >
                        {Generos.map((item, i) => {
                            return (
                            <MenuItem value={item.code} key={i}>{item.description}</MenuItem>
                            )
                        })}
                    </Select>
                </FormControl>

                
                <br />
                <br />
            



                <div className='d-flex'>

                    <TextField
                    required
                    type='number'
                    name='unpublishedDndaNumberLetter'
                    value={addWorks.unpublishedDndaNumberLetter}
                    onChange={handleInputsChange}
                    label="letra"
                    />

                    <span className='d-flex align-items-center'>&nbsp;fecha&nbsp;&nbsp;</span>

                    <TextField
                    required
                    name='unpublishedDate'
                    type="date"
                    placeholder="1990-12-24" 
                    value={addWorks.unpublishedDate}
                    onChange={handleInputsChange}
                    label="fecha"
                    />
                </div>  




                <div className='d-flex mt-3'>

                    <TextField
                    required
                    type='number'
                    name='unpublishedDndaNumberMusic'
                    value={addWorks.unpublishedDndaNumberMusic}
                    onChange={handleInputsChange}
                    label="musica"
                    />

                    <span className='d-flex align-items-center'>&nbsp;fecha&nbsp;&nbsp;</span>

                    <TextField
                    required
                    name='editedDate'
                    type="date"
                    //defaultValue="1990-12-24" 
                    value={addWorks.editedDate}
                    onChange={handleInputsChange}
                    label="fecha"
                    />
                </div>  
            


            </div>


            <div className='row mt-3'>


                <div className='col-xs-12 col-md-4'>
                    <p className='fw-bold'>Letra (texto)</p>



                </div>

                <div className='col-xs-12 col-md-4'>

                    <TextareaAutosize
                    required
                    name='lyrics'
                    aria-label="minimum height"
                    value={addWorks.lyrics}
                    onChange={handleInputsChange}
                    minRows={3}
                    placeholder="letra..."
                    style={{ width: 375, marginLeft: '9px' }}
                    />


                </div>


            </div>

            {/* FILES */}

            <div className='row'>
            
                <div className='col-xs-12 col-md-4'>
                    <div className='pt-2' style={{ marginTop: '10px', marginBottom: '5px' }}>
                    <p className='subtitle'> <img src={UploadIcon} className='sidebar-icons'/>Archivo de Partitura (PDF)</p>
                    <div className='wrapper' style={{ height: 'auto' }}>
                        <DropFilePDF setDocuments={setDocuments}/>
                        <p className='standard-text mt-3'>.PDF</p> 
                    </div>
                    </div>

                </div>

                <div className='col-xs-12 col-md-4 ps-3 pe-0 ms-1'>
                    <div className='pt-2' style={{ marginTop: '10px', marginBottom: '5px' }}>
                    <p className='subtitle'> <img src={UploadIcon} className='sidebar-icons'/>Archivo de audio (MP3)</p>
                    <div className='wrapper' style={{ height: 'auto' }}>
                        <DropFileMP3 setDocuments2={setDocuments2}/>
                        <p className='standard-text mt-3'>.MP3</p> 
                    </div>
                    </div>


                </div>


            </div>

            {/* MEMBERS (state) */}
            {addWorks.interestedParties.map((item, i) => {
            return (
            <div className='row mt-3' key={i}>


                <div className='col'>

                    <div className='d-flex'>
                        <FormControl style={{width: '20%'}}>
                            <InputLabel id="demo-simple-select-label">Funcion</InputLabel>
                            <Select
                                defaultValue= ""
                                name='role'
                                labelId="demo-simple-select-label"
                                id="demo-simple-select"
                                value={interestedParties.role}
                                label="funcion"
                                onChange={e => handleInputChange(e, i)}
                                >
                                {Roles.map((item, i) => {
                                    return (
                                    <MenuItem value={item.role} key={i}>{item.description}</MenuItem>
                                    )
                                })}
                            </Select>
                        </FormControl>


                        &nbsp;

                        <TextField
                        
                        name='nameNumber'
                        type='number'
                        value={interestedParties.nameNumber}
                        onChange={e => handleInputChange(e, i)}
                        label="socio #"
                        style={{width: '10%'}}
                        />

                        &nbsp;

                        <TextField
                        
                        name='fullName'
                        value={interestedParties.fullName}
                        onChange={e => handleInputChange(e, i)}
                        label="nombre y apellido"
                        />
                        &nbsp;

                        <TextField
                        
                        name='dni'
                        type='number'
                        value={interestedParties.dni}
                        onChange={e => handleInputChange(e, i)}
                        label="dni"
                        style={{width: '10%'}}
                        InputProps={{ inputProps: { min: 1000000 } }}
                        />

                        &nbsp;

                        <TextField
                        
                        name='porcentPer'
                        type='number'
                        value={interestedParties.porcentPer}
                        onChange={e => handleInputChange(e, i)}
                        label="%"
                        style={{width: '10%'}}
                        InputProps={{ inputProps: { min: 1, max: 100 } }}
                        />

                    </div>


                                

                </div>

            </div>

            );})}                       
        </div>

        <div className='row mt-2'>
            <div className='col'>
                <div className='text-end'>
                    <Link to={'/'} style={{textDecoration: 'none'}}><Button variant="outlined">Cancelar</Button></Link>
                    &nbsp;
                    <Button variant="contained" type="submit">Finalizar</Button>
    
                </div>
            </div>
        </div>


    </form>

    </>
  )
}



export default Form;