import * as React from 'react'
import {
  ScrollView,
  StyleProp,
  TextStyle,
  TouchableOpacity,
  View,
  ViewStyle,
  StyleSheet,
  Button,
} from 'react-native'
import { observer } from 'mobx-react-lite'
import { color, typography } from '../../theme'
import { Text } from '../'
import { flatten } from 'ramda'
import Slider from '@react-native-community/slider'
import { useState } from 'react'
import Accordion from 'react-native-collapsible/Accordion'
import * as Animatable from 'react-native-animatable'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import { Switch } from 'react-native-elements'

const CONTAINER: ViewStyle = {
  justifyContent: 'center',
}

const TEXT: TextStyle = {
  fontFamily: typography.primary,
  fontSize: 14,
  color: color.primary,
}

export interface TweaksProps {
  /**
   * An optional style override useful for padding & margin.
   */
  style?: StyleProp<ViewStyle>
  physics
  setPhysics
}

/**
 * Describe your component here
 */
export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element {
  const { style, physics, setPhysics } = props
  //    const styles = flatten([CONTAINER, style])

  const content = [
    {
      title: 'Physics',
      content: (
        <View>
          <Text preset="fieldLabel" text="Gravity" />
          <Switch
            color="#a991f1"
            trackColor={{
              false: '#62686E',
              true: '#a991f1',
            }}
            style={styles.switch}
            value={physics.gravityOn}
            onValueChange={() => {
              setPhysics({ ...physics, gravityOn: !physics.gravityOn })
            }}
          />
          <Text preset="fieldLabel" text={'Gravity: ' + physics.gravity} />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={0}
            maximumValue={1}
            onValueChange={(value) => {
              setPhysics({ ...physics, gravity: value })
            }}
            value={physics.gravity}
            step={0.01}
          />
          <Text preset="fieldLabel" text={'Repulsive force: ' + physics.charge} />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={-400}
            maximumValue={100}
            onValueChange={(value) => {
              setPhysics({ ...physics, charge: value })
            }}
            value={physics.charge}
            step={1}
          />
          <Text preset="fieldLabel" text={'Link Force: ' + physics.linkStrength} />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={0}
            maximumValue={2}
            onValueChange={(value) => {
              setPhysics({ ...physics, linkStrength: value })
            }}
            value={physics.linkStrength}
            step={0.01}
          />
          <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={1}
            maximumValue={10}
            onValueChange={(value) => {
              setPhysics({ ...physics, linkIts: value })
            }}
            value={physics.linkIts}
            step={1}
          />
          <Text preset="fieldLabel" text="Collision" />
          <Switch
            color="#a991f1"
            trackColor={{
              false: '#62686E',
              true: '#a991f1',
            }}
            style={styles.switch}
            value={physics.collision}
            onValueChange={() => {
              setPhysics({ ...physics, collision: !physics.collision })
            }}
          />
          <Text preset="fieldLabel" text={'Alpha Decay: ' + physics.alphaDecay} />
          <Slider
            style={styles.slider}
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            minimumValue={0}
            maximumValue={1}
            onValueChange={(value) => {
              setPhysics({ ...physics, alphaDecay: value })
            }}
            value={physics.alphaDecay}
            step={0.01}
          />
          <Text preset="fieldLabel" text={'Alhpa Target: ' + physics.alphaTarget} />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={0}
            maximumValue={1}
            onValueChange={(value) => {
              setPhysics({ ...physics, alphaTarget: value })
            }}
            value={physics.alphaTarget}
            step={0.1}
          />
          <Text preset="fieldLabel" text={'Viscosity: ' + physics.velocityDecay} />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={0}
            maximumValue={1}
            onValueChange={(value) => {
              setPhysics({ ...physics, velocityDecay: value })
            }}
            value={physics.velocityDecay}
            step={0.01}
          />
          <Text preset="fieldLabel" text={'Galaxy Mode (3D-only)'} />
          <Switch
            color="#a991f1"
            trackColor={{
              false: '#62686E',
              true: '#a991f1',
            }}
            style={styles.switch}
            value={physics.galaxy}
            onValueChange={() => {
              setPhysics({ ...physics, galaxy: !physics.galaxy })
            }}
          />
        </View>
      ),
    },
    {
      title: 'Visual',
      content: (
        <View>
          <Text preset="fieldLabel" text="Colorful" />
          <Switch
            color="#a991f1"
            trackColor={{
              false: '#62686E',
              true: '#a991f1',
            }}
            style={styles.switch}
            value={physics.colorful}
            onValueChange={() => {
              setPhysics({ ...physics, colorful: !physics.colorful })
            }}
          />
          <Text preset="fieldLabel" text="Hover highlight" />
          <Switch
            color="#a991f1"
            trackColor={{
              false: '#62686E',
              true: '#a991f1',
            }}
            style={styles.switch}
            value={physics.hover}
            onValueChange={() => {
              setPhysics({ ...physics, hover: !physics.hover })
            }}
          />
          <Text preset="fieldLabel" text={'Line Opacity: ' + physics.linkOpacity} />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={0}
            maximumValue={1}
            onValueChange={(value) => {
              setPhysics({ ...physics, linkOpacity: value })
            }}
            value={physics.linkOpacity}
            step={0.01}
          />
          <Text preset="fieldLabel" text={'Line width: ' + physics.linkWidth} />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={0.1}
            maximumValue={10}
            onValueChange={(value) => {
              setPhysics({ ...physics, linkWidth: value })
            }}
            value={physics.linkWidth}
            step={0.1}
          />
          <Text preset="fieldLabel" text={'Node size: ' + physics.nodeRel} />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={1}
            maximumValue={10}
            onValueChange={(value) => {
              setPhysics({ ...physics, nodeRel: value })
            }}
            value={physics.nodeRel}
            step={0.01}
          />
          <Text preset="fieldLabel" text={'Particles: ' + physics.particles} />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={0}
            maximumValue={10}
            onValueChange={(value) => {
              setPhysics({ ...physics, particles: value })
            }}
            value={physics.particles}
            step={1}
          />
          <Text preset="fieldLabel" text={'Particle Size: ' + physics.particleWidth} />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={1}
            maximumValue={10}
            onValueChange={(value) => {
              setPhysics({ ...physics, particleWidth: value })
            }}
            value={physics.particleWidth}
            step={0.1}
          />
          <Text preset="fieldLabel" text="Labels" />
          <Switch
            color="#a991f1"
            trackColor={{
              false: '#62686E',
              true: '#a991f1',
            }}
            style={styles.switch}
            value={physics.labels}
            onValueChange={() => {
              setPhysics({ ...physics, labels: !physics.labels })
            }}
          />
          <Text
            preset="fieldLabel"
            text={'Scale when labels become visible: ' + physics.labelScale}
          />
          <Slider
            minimumTrackTintColor="#a991f1"
            maximumTrackTintColor="#242730"
            thumbTintColor="#a991f1"
            style={styles.slider}
            minimumValue={0.1}
            maximumValue={5}
            onValueChange={(value) => {
              setPhysics({ ...physics, labelScale: value })
            }}
            value={physics.labelScale}
            step={0.1}
          />
        </View>
      ),
    },
    {
      title: 'Modes',
      content: <View></View>,
    },
  ]

  const [activeSections, setActiveSections] = useState([])

  const setSections = (sections) => {
    setActiveSections(sections.includes(undefined) ? [] : sections)
  }

  const renderHeader = (section, _, isActive) => {
    return (
      <Animatable.View
        duration={400}
        style={[styles.header, isActive ? styles.active : styles.inactive]}
        transition="backgroundColor"
      >
        <Text style={styles.headerText}>{section.title}</Text>
      </Animatable.View>
    )
  }

  const renderContent = (section, _, isActive) => {
    return (
      <Animatable.View
        duration={400}
        style={[styles.content, isActive ? styles.active : styles.inactive]}
        transition="backgroundColor"
      >
        {section.content}
      </Animatable.View>
    )
  }
  const [tweaks, setTweaks] = useState(true)
  if (true) {
    if (tweaks) {
      return (
        <View style={styles.container}>
          <View style={{ height: 30, width: '100%', backgroundColor: '#2a2e38' }}>
            <TouchableOpacity
              style={{
                width: 30,
                color: '#a991f1',
                textAlign: 'center',
                marginLeft: 'auto',
                padding: 5,
              }}
              onPress={() => {
                setTweaks(false)
              }}
            >
              <Icon name="close-circle" color="#ffffff" size={20} />
            </TouchableOpacity>
          </View>
          <ScrollView>
            <Accordion
              activeSections={activeSections}
              sections={content}
              touchAbleComponent={TouchableOpacity}
              expandMultiple={true}
              renderHeader={renderHeader}
              renderContent={renderContent}
              duration={200}
              onChange={setSections}
              renderAsFlatList={false}
            />
          </ScrollView>
        </View>
      )
    } else {
      return (
        <TouchableOpacity
          onPress={() => {
            setTweaks(true)
          }}
          style={{
            position: 'absolute',
            top: 50,
            left: 50,
            width: 30,
            color: '#ffffff',
            zIndex: 100,
          }}
        >
          <Icon name="cog" color="#ffffff" size={30} />
        </TouchableOpacity>
      )
    }
  } else {
    return (
      <View
        style={{
          position: 'absolute',
          top: '5%',
          left: '5%',
          zIndex: 100,
          width: 300,
          backgroundColor: '#000000',
          padding: 20,
        }}
      >
        <Text preset="bold" text="Physics" />
        <Text preset="fieldLabel" text={'Repulsive force: ' + physics.charge} />
        <Slider
          minimumTrackTintColor="#a991f1"
          maximumTrackTintColor="#242730"
          thumbTintColor="#a991f1"
          style={styles.slider}
          minimumValue={-400}
          maximumValue={100}
          onValueChange={(value) => {
            setPhysics({ ...physics, charge: value })
          }}
          value={physics.charge}
          step={1}
        />
        <Text preset="fieldLabel" text={'Link Force: ' + physics.linkStrength} />
        <Slider
          minimumTrackTintColor="#a991f1"
          maximumTrackTintColor="#242730"
          thumbTintColor="#a991f1"
          style={styles.slider}
          minimumValue={0}
          maximumValue={2}
          onValueChange={(value) => {
            setPhysics({ ...physics, linkStrength: value })
          }}
          value={physics.linkStrength}
          step={0.1}
        />
        <Text preset="fieldLabel" text={"'Link Iterations': " + physics.linkIts} />
        <Slider
          minimumTrackTintColor="#a991f1"
          maximumTrackTintColor="#242730"
          thumbTintColor="#a991f1"
          style={styles.slider}
          minimumValue={1}
          maximumValue={10}
          onValueChange={(value) => {
            setPhysics({ ...physics, linkIts: value })
          }}
          value={physics.linkIts}
          step={1}
        />
        <Text preset="fieldLabel" text="Collision" />
        <Switch
          color="#a991f1"
          trackColor={{
            false: '#62686E',
            true: '#a991f1',
          }}
          style={styles.switch}
          value={physics.collision}
          onValueChange={() => {
            setPhysics({ ...physics, collision: !physics.collision })
          }}
        />
        <Text preset="bold" text="Visual" />
        <Text preset="fieldLabel" text={'Particles: ' + physics.particles} />
        <Slider
          minimumTrackTintColor="#a991f1"
          maximumTrackTintColor="#242730"
          thumbTintColor="#a991f1"
          style={styles.slider}
          minimumValue={0}
          maximumValue={5}
          onValueChange={(value) => {
            setPhysics({ ...physics, particles: value })
          }}
          value={physics.particles}
          step={1}
        />
        <Text preset="bold" text="Modes" />
        <Text preset="fieldLabel" text="Expandable Graph" />
        <Switch
          color="#a991f1"
          trackColor={{
            false: '#62686E',
            true: '#a991f1',
          }}
          style={styles.switch}
          value={physics.collapse}
          onValueChange={() => {
            setPhysics({ ...physics, collapse: !physics.collapse })
          }}
        />
        <Text preset="fieldLabel" text="3D" />
        <Switch
          color="#a991f1"
          trackColor={{
            false: '#62686E',
            true: '#a991f1',
          }}
          style={styles.switch}
          value={physics.threedim}
          onValueChange={() => {
            setPhysics({ ...physics, threedim: !physics.threedim })
          }}
        />
      </View>
    )
  }
})

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    backgroundColor: '#2a2e38',
    position: 'absolute',
    zIndex: 5,
    marginLeft: '2%',
    marginTop: '2%',
    maxWidth: 275,
    borderRadius: 10,
    borderStyle: 'solid',
    borderWidth: 10,
    borderColor: '#2a2e38',
    maxHeight: '80%',
    paddingBottom: 20,
  },
  title: {
    textAlign: 'left',
    fontSize: 22,
    fontWeight: '300',
    marginBottom: 20,
    paddingLeft: 10,
  },
  header: {
    backgroundColor: '#2a2e38',
    padding: 10,
    paddingBottom: 20,
    textAlign: 'left',
  },
  headerText: {
    textAlign: 'left',
    paddingLeft: 30,
    fontSize: 16,
    fontWeight: '500',
  },
  content: {
    padding: 20,
    paddingLeft: 60,
    backgroundColor: '#000000',
  },
  active: {
    backgroundColor: '#2a2e38',
  },
  inactive: {
    backgroundColor: '#2a2e38',
  },
  selectors: {
    marginBottom: 10,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  selector: {
    backgroundColor: '#2a2e38',
    padding: 10,
  },
  activeSelector: {
    fontWeight: 'bold',
  },
  selectTitle: {
    fontSize: 14,
    fontWeight: '500',
    padding: 10,
  },
  multipleToggle: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginVertical: 30,
    alignItems: 'center',
  },
  multipleToggle__title: {
    fontSize: 16,
    marginRight: 8,
  },
  slider: {
    minimumTrackTintColor: '#a991f1',
    thumbTintColor: '#a991f1',
    height: 40,
    width: '90%',
  },
  switch: {
    width: '5',
    height: 20,
    marginVertical: 10,
  },
})