knn

import React, { useRef, useEffect } from 'react';
import _uniqueId from 'lodash/uniqueId'

const Canvas = props => {
  const {points} = props

  const canvasRef = useRef(null)

  const draw = (ctx, start_point, scale) => {
    points.forEach( item => {
      item.y = parseInt(item.y) * -1; // odwracanie osi y jeśli potrzebujesz
      // x = x * -1; // odwracanie osi x jeśli potrzebujesz
      ctx.lineTo(item.x * scale + start_point[0], item.y * scale + start_point[1]);
    })
  }

  useEffect(() => {
    const canvas = canvasRef.current
    ,ctx = canvas.getContext('2d')

    const w = canvas.width,
    h = canvas.height
    const start_point = [0, h]
    const scale = 30

        ctx.lineWidth=15;
        ctx.strokeStyle = "#ffffff";
        ctx.rect(50,50,200,150);
        ctx.stroke();

    ctx.beginPath()
    for (var y = 0.5; y < h; y += 10) {
      ctx.moveTo(0, y);
      ctx.lineTo(w, y);
    }

    for (var x = 0.5; x < w; x += 10) {
      ctx.moveTo(x, 0);
      ctx.lineTo(x, h);
    }

    ctx.strokeStyle = '#000000'
    ctx.stroke()
    ctx.closePath()

    ctx.beginPath()
    draw(ctx, start_point, scale)
    ctx.strokeStyle = 'blue'
    ctx.lineWidth = 3
    ctx.stroke()
    ctx.closePath()



  }, [draw])

  return <canvas ref={canvasRef} width={400} height={400} />
}

const Knn = props => {
  const {select, points, startPosition} = props
  if(select === "-1") return false
  if(points.length <= 1) return false

  let points2 = points
  let currentPoint = startPosition[0]
  let usedPoints = []
  let cost = 0.00

  points2 = points2.filter(point => (point.x !== currentPoint.x && point.y !== currentPoint.y))
  usedPoints = usedPoints.concat(currentPoint)

  while(points2.length !== 0){
    //wyliczanie wszystkich kosztów

    const costTable = points2.map( point => Math.sqrt(Math.pow(point.x - currentPoint.x, 2) + Math.pow(point.y - currentPoint.y, 2)))

    //znalezienie id najmniejszego kosztu
    let min = costTable[0], id = points2[0]
    for(let j=0; j<costTable.length; j++){
      if(min > costTable[j]){
        min = costTable[j]
        id = points2[j]
      }
    }

    //dodanie najmniejszego kosztu do użytych
    usedPoints = usedPoints.concat(id)
    currentPoint = id
    cost = cost + min

    //usuwanie z listy najmniejszego
    points2 = points2.filter(point => point.id !== id.id)
  }

  cost = Math.round(cost * 100) / 100

  const newPoints = {
      id: _uniqueId(),
      x: startPosition[0].x,
      y: startPosition[0].y
  }

  usedPoints = usedPoints.concat(newPoints)
  console.log(usedPoints)

  //usedPoints = usedPoints.map(item => <li key={item.id}>Punkt ({item.x}, {item.y})</li>)

  return (
    <>
      <h3>Wyliczenia</h3>
      <p>Koszt: {cost}</p>
      <ul>
        {usedPoints.map(item => <li key={item.id}>Punkt ({item.x}, {item.y})</li>)}
      </ul>
      <Canvas points={usedPoints}/>
    </>
  )
}

const SelectList = props => {
  const {points, HandleForm, select} = props

  if(points.length <= 2) return false

  const List = points.map(point =>
    <option key={point.id} value={point.id}>({point.x}, {point.y})</option>
)

  return (
    <select name="select" value={select} onChange={HandleForm} >
      <option key={-1} value={-1}>Wybierz</option>
      {List}
    </select>
  )
}

const ShowList = props => {
  const {points, RemoveFromPoints} = props

  if(points.length <= 0) return false

  return (
    points.map(point => <li key={point.id}>Punkt: ({point.x}, {point.y}) <button onClick={RemoveFromPoints.bind(this, point.id)}>Usuń</button></li>)
  )
}

const InsertForm = props => {
  const {HandleForm, AddToPoints} = props

  return (
    <>
      <h1>Algorytm najbliższego sąsiada</h1>
      <p>Podaj x: <input name="x" type="text" onChange={HandleForm}/></p>
      <p>Podaj y: <input name="y" type="text" onChange={HandleForm}/></p>
      <button onClick={AddToPoints}>Dodaj</button>
    </>
  )
}

class App extends React.Component {
  state = {
    select: "-1",
    x: 0,
    y: 0,
    cost: 0,
    points: [],
    startPosition: {},
    knnPoints: []
  }

  SetStartPosition = id => {
    const startPosition = this.state.points.filter(points => {
      return points.id === id
    })

    this.setState({startPosition})
  }

  HandleForm = e => {
    const {name, value} = e.target
    this.setState({[name]: value})

    if(name === 'select' && value !== "-1"){
      this.SetStartPosition(value)
    }
  }

  AddToPoints = () => {
    const newPoints = [{
      id: _uniqueId(),
      x: this.state.x,
      y: this.state.y
    }]

    this.setState({
      points: this.state.points.concat(newPoints)
    })
  }

  RemoveFromPoints = id => {
    const points = this.state.points.filter(points => {
      return points.id !== id
    })

    this.setState({points})
  }

  render() {
    return (
      <React.StrictMode>
        <InsertForm
          HandleForm={this.HandleForm}
          AddToPoints={this.AddToPoints}
        />
        <ShowList
          points={this.state.points}
          RemoveFromPoints={this.RemoveFromPoints}
        />
        <SelectList
          points={this.state.points}
          HandleForm={this.HandleForm}
          select={this.state.select}
        />
        <Knn
          select={this.state.select}
          points={this.state.points}
          startPosition={this.state.startPosition}
        />
      </React.StrictMode>
    )
  }
}

export default App;