import React, { Component, useState } from "react";
import Form from 'react-bootstrap/Form'
import Button from 'react-bootstrap/Button';
import Table from 'react-bootstrap/Table';
import axios from 'axios';

export default class Createsong extends Component {

  constructor(props) {
    super(props)

    // Setting up functions
    this.onChangePlaylistIndex = this.onChangePlaylistIndex.bind(this);
    this.onChangePlaylistType = this.onChangePlaylistType.bind(this);
    this.onChangePlaylistTitle = this.onChangePlaylistTitle.bind(this);
    this.onChangePlaylistlink = this.onChangePlaylistlink.bind(this);
    this.onChangePlaylistImgurl = this.onChangePlaylistImgurl.bind(this);
    this.onChangePlaylistcolor = this.onChangePlaylistcolor.bind(this);
    this.onChangePlaylistArtist = this.onChangePlaylistArtist.bind(this);
    //songdata
    this.onChangeSongIndex = this.onChangeSongIndex.bind(this);
    this.onChangeSongName = this.onChangeSongName.bind(this);
    this.onChangeSongImage = this.onChangeSongImage.bind(this);
    this.onChangeSongLink = this.onChangeSongLink.bind(this); 
    this.onSubmit = this.onSubmit.bind(this);

    // Setting up state
    this.state = {
      index: '',
      type: '',
      title: '',
      link: '',
      imgUrl: '',
      color: '',
      artist: '',
      //song
      songindex:'',
      songname:'',
      songimage:'',
      songlink:''

    }
  }

  onChangePlaylistIndex(e) {
    this.setState({ index: e.target.value })
  }

  onChangePlaylistType(e) {
    this.setState({ type: e.target.value })
  }

  onChangePlaylistTitle(e) {
    this.setState({ title: e.target.value })
  }
  
  onChangePlaylistlink(e) {
    this.setState({ link: e.target.value })
  }
  
  onChangePlaylistImgurl(e) {
    this.setState({ imgUrl: e.target.value })
  }
  
  onChangePlaylistcolor(e) {
    this.setState({ color: e.target.value })
  }
  
  onChangePlaylistArtist(e) {
    this.setState({ artist: e.target.value })
  }
  //song
  onChangeSongIndex(e) {
    this.setState({ songindex: e.target.value })
  }
  onChangeSongName(e) {
    this.setState({ songname: e.target.value })
  }
  onChangeSongImage(e) {
    this.setState({ songimage: e.target.value })
  }
  onChangeSongLink(e) {
    this.setState({ songlink: e.target.value })
  }


  onSubmit(e) {
    e.preventDefault()

    const songObject = {
      index: this.state.index,
      type: this.state.type,
      title: this.state.title,
      link: this.state.link,
      imgUrl: this.state.imgUrl,
      color: this.state.color,
      artist: this.state.artist,
      songdata: [{songindex: this.state.songindex, songname: this.state.songname, songimage: this.state.songimage, songlink: this.state.songlink,}],
   
    };
    axios.post('https://react-mernstack-crud-1.cocodisme.repl.co/songs/create-song', songObject)
      .then(res => console.log(res.data));

    this.setState({ index: '', type: '', title: '', link: '', imgUrl: '', color: '', artist: '', songindex: '', songname: '', songimage: '', songlink: '', })
  }

  render() {
    return (<div className="container-fluidr">
      <Form onSubmit={this.onSubmit}>
        <Form.Group controlId="number">
          <Form.Label>Index</Form.Label>
          <Form.Control title="ex:1,2,3" type="number"min="0" value={this.state.index} onChange={this.onChangePlaylistIndex} />
        </Form.Group>

        <Form.Group controlId="text">
          <Form.Label>Type</Form.Label>

          <Form.Select value={this.state.type} onChange={this.onChangePlaylistType} aria-label="Default select example">
           <option>select</option>
           <option value="album">Album</option>
           <option value="playlist">Playlist</option>
         </Form.Select>
          
        </Form.Group>

        <Form.Group controlId="text">
          <Form.Label>Title</Form.Label>
          <Form.Control title="ex:Sivakumar Pondatti" type="text" value={this.state.title} onChange={this.onChangePlaylistTitle} />
        </Form.Group>

        <Form.Group controlId="link">
          <Form.Label>Audio</Form.Label>
          <Form.Control title="ex:audio.mp3" type="link" value={this.state.link} onChange={this.onChangePlaylistlink} />
        </Form.Group>

        <Form.Group controlId="link">
          <Form.Label>Poster</Form.Label>
          <Form.Control title="ex:image.jpg" type="link" value={this.state.imgUrl} onChange={this.onChangePlaylistImgurl} />
        </Form.Group>

        <Form.Group controlId="text">
          <Form.Label>Artist Name</Form.Label>
          <Form.Control title="ex:Eminem" type="text" value={this.state.artist} onChange={this.onChangePlaylistArtist} />
        </Form.Group>

        <Form.Group controlId="text">
          <Form.Label>Color</Form.Label>
          <Form.Control
    type="color"
    id="exampleColorInput"
    defaultValue="#563d7c"
    title="Choose your color"
    value={this.state.color}
    onChange={this.onChangePlaylistcolor}
  />
          
          <Form.Control title="ex:#fff or rgb(0,0,0)" type="text" value={this.state.color} onChange={this.onChangePlaylistcolor} />
        </Form.Group>

<Table striped bordered hover>
        <thead>
    <tr>
      <th scope="col">index</th>
      <th scope="col">songname</th>
      <th scope="col">songimage</th>
      <th scope="col">songlink</th>
      <th scope="col">Add</th>
      <th scope="col">Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><Form.Group controlId="number">
          <Form.Control type="number"min="0" value={this.state.songindex} onChange={this.onChangeSongIndex} />
        </Form.Group></th>

      <td><Form.Group controlId="text">
          <Form.Control title="ex:Sivakumar Pondatti" type="text" value={this.state.songname} onChange={this.onChangeSongName} />
        </Form.Group></td>

      <td><Form.Group controlId="link">
          <Form.Control type="link" value={this.state.songimage} onChange={this.onChangeSongImage} />
        </Form.Group></td>

      <td><Form.Group controlId="text">
          <Form.Control title="ex:Sivakumar Pondatti" type="text" value={this.state.songlink} onChange={this.onChangeSongLink} />
        </Form.Group></td>
        <td><Button variant="outline-primary" size="sm" block="block" onclick="insRow()"  className="mt-4">
          +
        </Button></td>
        <td><Button variant="outline-primary" onclick="deleteRow(this)" size="sm" block="block"  className="mt-4">
          -
        </Button></td>
    </tr>
      </tbody>
</Table>


        

        <Button variant="danger" size="lg" block="block" type="submit" className="mt-4">
          Enter
        </Button>
      </Form>
    </div>);
  }
}