struct Part3View2: View {
    @State var position : [CGSize]
    
    @State private var currentProgress = 0.0
    private let total = 100.0
    
    @Binding var kigu: Bool
    @Binding var beaker_1:Bool
    @Binding var beaker_2:Bool
    @Binding var beaker_1_Del:Bool
    @Binding var beaker_2_Del:Bool
    @Binding var imgSet:Bool
    @Binding var AS_1:Bool
    @Binding var AS_2:Bool
    @Binding var KI_Del:Bool
    @Binding var H2O2_Del:Bool
    @Binding var AS_2_drag:Bool
    
    let beaker = Beaker(name : "Beaker")
    
    var body: some View {
        
            /*HStack {
            let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()
            ProgressView(value: currentProgress, total: total)
                .accentColor(.purple)
                .onReceive(timer) { _ in
                    if currentProgress < total {
                        currentProgress += 2.0
                        if currentProgress > total {
                            currentProgress = total
                        }
                    }
                }
                .rotationEffect(Angle(degrees: -90), anchor: UnitPoint(x: -0.2, y: 1.0))
                .position(x: position[4].width, y: position[4].height)
        }*/
    // ビーカー操作
       // Image("beaker")
      
            Image(uiImage:beaker.beaker_Image[0]!)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .scaledToFit()
            .frame(width: 180, height: 180, alignment: .center)
            .position(x: position[3].width, y: position[3].height)
            .blinkEffect()
    
        
        
        if beaker_1 == true {
            //Image("beaker")
        
                Image(uiImage:beaker.beaker_Image[0]!)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 180, height: 180, alignment: .center)
                .position(x: position[3].width, y: position[3].height)
            //Image("beaker")

                Image(uiImage:beaker.beaker_Image[0]!)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 180, height: 180, alignment: .center)
                .position(x: position[4].width, y: position[4].height)
                .blinkEffect()
        }
        
        if beaker_2 == true {
            //Image("beaker")

                Image(uiImage:beaker.beaker_Image[0]!)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 180, height: 180, alignment: .center)
                .position(x: position[4].width, y: position[4].height)
        }
        
        if kigu == true {       // 器具が表示される
            if beaker_1_Del == true {
                Image("beaker")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .scaledToFit()
                    .frame(width: 100, height: 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .position(x: position[0].width, y: position[0].height)
                    .gesture(
                      DragGesture()
                        .onChanged { value in
                            self.position[0] = CGSize(
                              width: value.startLocation.x + value.translation.width,
                              height: value.startLocation.y + value.translation.height
                            )
                        }
                          .onEnded { value in
                            if (-420 ... -138 ~= self.position[0].height) && (0...200 ~= self.position[0].width) {
                                beaker_1 = true
                                beaker_1_Del = false
                                imgSet = true
                            }
                            
                            self.position[0] = CGSize(
                              width: value.startLocation.x + value.translation.width,
                              height: value.startLocation.y + value.translation.height
                            )
                          }
                    )
            }
            
            //2個目ビーカー
            if imgSet == true {
                if beaker_2_Del == true{
                    Image("beaker")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .scaledToFit()
                        .frame(width: 100, height: 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                        .position(x: position[5].width, y: position[5].height)
                        .gesture(
                          DragGesture()
                            .onChanged { value in
                                self.position[5] = CGSize(
                                  width: value.startLocation.x + value.translation.width,
                                  height: value.startLocation.y + value.translation.height
                                )
                            }
                              .onEnded { value in
                                if (-420 ... -138 ~= self.position[5].height) && (201...400 ~= self.position[5].width) {
                                    beaker_2 = true
                                    beaker_2_Del = false
                                }
                                
                                self.position[5] = CGSize(
                                  width: value.startLocation.x + value.translation.width,
                                  height: value.startLocation.y + value.translation.height
                                )
                              }
                        )
                }
            }
        }
        
        
    // 試薬操作
        // ヨウ化カリウム
        if AS_1 == true {
            Image("AS")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 180, height: 180, alignment: .center)
                .position(x: position[3].width, y: position[3].height)
        }
        
        if AS_2 == true {
            Image("AS")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 180, height: 180, alignment: .center)
                .position(x: position[4].width, y: position[4].height)
                .gesture(
                  DragGesture().onChanged { value in
                    self.position[4] = CGSize(
                      width: value.startLocation.x + value.translation.width,
                      height: value.startLocation.y + value.translation.height
                    )
                  }
                  .onEnded { value in
                    if (-270 ... -190 ~= self.position[1].height) && (70...130 ~= self.position[1].width) && (beaker_1 == true) {
                        AS_2_drag = true
                        beaker_1 = false
                        beaker_2 = false
                        AS_1 = false
                        AS_2 = false
                    }
                    
                    self.position[4] = CGSize(
                      width: value.startLocation.x + value.translation.width,
                      height: value.startLocation.y + value.translation.height
                    )
                  }
               )
        }

        
        if AS_2_drag == true {
            Image("after")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .scaledToFit()
                .frame(width: 180, height: 180, alignment: .center)
                .position(x: position[3].width, y: position[3].height)
        }
        
        if kigu == false {      // 試薬が表示される
            if KI_Del == true {
                Image("KI")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .scaledToFit()
                    .frame(width: 100, height: 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .position(x: position[1].width, y: position[1].height)
                    .gesture(
                      DragGesture().onChanged { value in
                        self.position[1] = CGSize(
                          width: value.startLocation.x + value.translation.width,
                          height: value.startLocation.y + value.translation.height
                        )
                      }
                      .onEnded { value in
                        if (-270 ... -190 ~= self.position[1].height) && (70...130 ~= self.position[1].width) && (beaker_1 == true) {
                            AS_1 = true
                            KI_Del = false
                        }
                        
                        self.position[1] = CGSize(
                          width: value.startLocation.x + value.translation.width,
                          height: value.startLocation.y + value.translation.height
                        )
                      }
                   )
            }
        

            if H2O2_Del == true{
                Image("H2O2")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .scaledToFit()
                    .frame(width: 100, height: 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .position(x: position[2].width, y: position[2].height)
                    .gesture(
                      DragGesture().onChanged { value in
                        self.position[2] = CGSize(
                          width: value.startLocation.x + value.translation.width,
                          height: value.startLocation.y + value.translation.height
                        )
                      }
                      .onEnded { value in
                        if (-270 ... -190 ~= self.position[2].height) && (270...325 ~= self.position[2].width) && (beaker_2 == true) {
                            AS_2 = true
                            H2O2_Del = false
                        }

                        self.position[2] = CGSize(
                          width: value.startLocation.x + value.translation.width,
                          height: value.startLocation.y + value.translation.height
                        )
                      }
                    )
                //Text("x:\(position[2].width), y:\(position[2].height)")
            }
        }
        

        // 指示
        if (AS_1 == true) && (AS_2 == true) {
            Text("右のビーカーを左のビーカーに近づけて、　混ぜてください")
                .padding()
                .font(.body)
                .frame(alignment: .center)
                .position(x: position[7].width, y: position[7].height)

            
        } else if (beaker_1 == true) && (beaker_2 == true){
            Text("水溶液を入れてください")
                .padding()
                .font(.body)
                .frame(alignment: .center)
                .position(x: position[7].width, y: position[7].height)
            
        } else if AS_2_drag == true {
            Button(action: {
            }) {
                Text("解説")
                    .padding()
                    .font(.title)
                    .frame(alignment: .center)
                    .position(x: position[7].width, y: position[7].height)
            }
            .buttonStyle(ShrinkButtonStyle())
            
        } else {
            Text("ビーカーをセットしてください")
                .padding()
                .font(.body)
                .frame(alignment: .center)
                .position(x: position[7].width, y: position[7].height)
        }
    }
}

// 点滅
extension View {
    func blinkEffect(opacity: ClosedRange<Double> = 0.1...1, interval: Double = 0.6) -> some View {
        self.modifier(BlinkEffect(opacity: opacity, interval: interval))
    }
}


//struct ExperimentView2_Previews: PreviewProvider {
//    static var previews: some View {
//        StartMenuView()    }
//}