import rect from '../../assets/images/components/rect.png'
import ellipse from '../../assets/images/components/ellipse.png'
import donut from '../../assets/images/components/donut.png'
import triangle from '../../assets/images/components/triangle.png'
import polygon from '../../assets/images/components/polygon.png'
import star from '../../assets/images/components/star.png'
import line from '../../assets/images/components/line.png'
import dash from '../../assets/images/components/dash.png'
import singleArrow from '../../assets/images/components/single-arrow.png'
import bothArrow from '../../assets/images/components/both-arrow.png'
import polyline from '../../assets/images/components/polyline.png'
import text from '../../assets/images/components/text.png'
import colorImage from '../../assets/images/components/color-image.png'
import grayImage from '../../assets/images/components/gray-image.png'
import audio from '../../assets/images/components/audio.png'
import container from '../../assets/images/components/container.png'
import infoWindow from '../../assets/images/components/info-window.png'
import localReference from '../../assets/images/components/local-reference.png'
import globalReference from '../../assets/images/components/global-reference.png'

function shapes() {
  return [
    {
      type: 'rect',
      description: 'rectangle shape',
      icon: rect,
      model: {
        type: 'rect',
        dimension: {
          width: 100,
          height: 100,
          depth: 100
        },
        lineStyle: {
          strokeStyle: 'red',
          lineWidth: 1
        },
        fillStyle: 'yellow',
        alpha: 1
      }
    },
    {
      type: 'ellipse',
      description: 'ellipse shape',
      icon: ellipse,
      model: {
        type: 'cylinder',
        dimension: {
          width: 100,
          height: 100,
          depth: 100
        },
        lineStyle: {
          strokeStyle: 'red',
          lineWidth: 1
        },
        fillStyle: 'yellow',
        alpha: 1
      }
    },
    {
      type: 'path',
      description: 'path shape',
      icon: polygon,
      model: {
        type: 'path',
        dimension: {
          width: 100,
          height: 100,
          depth: 100
        },
        lineStyle: {
          strokeStyle: 'navy',
          lineWidth: 1
        },
        fillStyle: 'orange',
        alpha: 1,
        path: [
          { x: -20, y: 0 },
          { x: -40, y: 20 },
          { x: -60, y: 60 },
          { x: 0, y: 100 },
          { x: 60, y: 60 },
          { x: 40, y: 20 },
          { x: 20, y: 0 },
          { x: 40, y: -20 },
          { x: 60, y: -60 },
          { x: 0, y: -100 },
          { x: -60, y: -60 },
          { x: -40, y: -20 }
        ],
        curved: true
      }
    }
  ]
}

function lines() {
  return [
    {
      type: 'line',
      description: 'simple line',
      icon: line,
      model: {
        type: 'line',
        x1: 100,
        y1: 100,
        x2: 200,
        y2: 200,
        fillStyle: '#fff',
        strokeStyle: '#000',
        alpha: 1,
        hidden: false,
        lineWidth: 3,
        lineDash: 'solid',
        lineCap: 'butt'
      }
    },
    {
      type: 'dash',
      description: 'dash line',
      icon: dash,
      model: {
        type: 'line',
        x1: 100,
        y1: 100,
        x2: 200,
        y2: 200,
        fillStyle: '#fff',
        strokeStyle: '#000',
        alpha: 1,
        hidden: false,
        lineWidth: 3,
        lineDash: 'round-dot',
        lineCap: 'butt'
      }
    },
    {
      type: 'single arrow',
      description: 'single arrow tip line',
      icon: singleArrow,
      model: {
        type: 'line',
        x1: 100,
        y1: 100,
        x2: 200,
        y2: 200,
        fillStyle: '#fff',
        strokeStyle: '#000',
        alpha: 3,
        hidden: false,
        lineWidth: 3,
        lineDash: 'solid',
        begin: 'arrow',
        lineCap: 'butt'
      }
    },
    {
      type: 'both arrow',
      description: 'both arrow tip line',
      icon: bothArrow,
      model: {
        type: 'line',
        x1: 100,
        y1: 100,
        x2: 200,
        y2: 200,
        fillStyle: '#fff',
        strokeStyle: '#000',
        alpha: 1,
        hidden: false,
        lineWidth: 3,
        lineDash: 'solid',
        begin: 'arrow',
        end: 'arrow',
        lineCap: 'butt'
      }
    },
    {
      type: 'polyline',
      description: 'polyline',
      icon: polyline,
      model: {
        type: 'polyline',
        path: [{ x: 100, y: 100 }, { x: 200, y: 100 }, { x: 200, y: 200 }, { x: 100, y: 200 }],
        fillStyle: '#fff',
        strokeStyle: '#000',
        alpha: 1,
        hidden: false,
        lineWidth: 1,
        lineDash: 'solid',
        lineCap: 'butt'
      }
    }
  ]
}

function textAndMedias() {
  return [
    {
      type: 'text',
      description: 'text',
      icon: text,
      model: {
        type: 'text',
        dimension: {
          width: 100,
          height: 200
        },
        textOptions: {
          text: 'Hello, Things Shell.',
          fontColor: 'red',
          bold: true,
          italic: true,
          fontSize: 100
        }
      }
    },
    {
      type: 'color image',
      description: 'color image',
      icon: colorImage,
      model: {
        type: 'image-view',
        left: 100,
        top: 100,
        width: 100,
        height: 100,
        isGray: false,
        fillStyle: '#fff',
        strokeStyle: '#000',
        alpha: 1,
        hidden: false,
        lineWidth: 1,
        lineDash: 'solid',
        lineCap: 'butt'
      }
    },
    {
      type: 'gray image',
      description: 'gray scale line',
      icon: grayImage,
      model: {
        type: 'image-view',
        left: 100,
        top: 100,
        width: 100,
        height: 100,
        isGray: true,
        fillStyle: '#fff',
        strokeStyle: '#000',
        alpha: 1,
        hidden: false,
        lineWidth: 1,
        lineDash: 'solid',
        lineCap: 'butt'
      }
    },
    {
      type: 'audio',
      description: 'audio',
      icon: audio,
      model: {
        type: 'audio',
        left: 100,
        top: 100,
        width: 20,
        height: 20
      }
    }
  ]
}

function groupContainer() {
  return [
    {
      type: 'container',
      description: 'general container',
      icon: container,
      model: {
        type: 'container',
        left: 100,
        top: 100,
        width: 100,
        height: 100,
        fillStyle: '#fff',
        strokeStyle: '#999',
        alpha: 1,
        hidden: false,
        lineWidth: 1,
        lineDash: 'solid',
        lineCap: 'butt'
      }
    }
  ]
}

var AXIS = {
  X: 0,
  Y: 1,
  Z: 2
}

function etc() {
  return [
    {
      type: 'robot-arm',
      description: 'Robot Arm',
      icon: infoWindow,
      model: {
        type: 'robot-arm',
        dimension: {
          width: 100,
          height: 100,
          depth: 100
        },
        config: [
          {
            joint: {
              axis: AXIS.Y,
              min: (-190 / 180) * Math.PI,
              max: (190 / 180) * Math.PI,
              radius: 2,
              height: 2
            },
            arm: {
              width: 0,
              height: 10,
              depth: 0
            }
          },
          {
            joint: {
              axis: AXIS.X,
              min: (-45 / 180) * Math.PI,
              max: (45 / 180) * Math.PI
            },
            arm: {
              width: 0,
              height: 0,
              depth: 10
            }
          },
          {
            joint: {
              axis: AXIS.X,
              min: (-45 / 180) * Math.PI,
              max: (45 / 180) * Math.PI
            },
            arm: {
              width: -3,
              height: 0,
              depth: 0
            }
          },
          {
            joint: {
              axis: AXIS.Y,
              min: (-90 / 180) * Math.PI,
              max: (75 / 180) * Math.PI
            },
            arm: {
              width: 0,
              height: -6,
              depth: 0
            }
          },
          {
            joint: {
              axis: AXIS.Y,
              min: (-139 / 180) * Math.PI,
              max: (20 / 180) * Math.PI
            }
          }
        ],
        angles: [0, -0.5, -0.3, 3, 4, 5]
      }
    },
    {
      type: 'gltf',
      description: 'GLTF Format Object',
      icon: infoWindow,
      model: {
        type: 'gltf',
        color: 'red',
        dimension: {
          width: 100,
          height: 100,
          depth: 100
        },
        url: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Buggy/glTF-Binary/Buggy.glb'
      }
    },
    {
      type: 'info-window',
      description: 'information window',
      icon: infoWindow,
      model: {
        type: 'info-window',
        left: 10,
        top: 10,
        width: 50,
        height: 50,
        fillStyle: '#fff',
        strokeStyle: 'DarkGoldenRod',
        hidden: true,
        frontSideTemplate:
          "<h2 id='xxx'>\n\t<%= text %>\n</h2>\n<img src='https://www.tutorialspoint.com/images/html.gif' alt='HTML Tutorial' height='150' width='140' />",
        backSideTemplate:
          "<h2 id='yyy'>\n\t<%= text %>\n</h2>\n<img src='https://www.tutorialspoint.com/images/html.gif' alt='HTML Tutorial' height='150' width='140' />",
        style:
          '#yyy {\n\tbackground-color:navy;\n\tcolor:white\n}\n#xxx, #yyy {\n\twhite-space:nowrap;\n\tmin-width:200px;\n}'
      }
    },
    {
      type: 'local reference',
      description: 'local reference',
      icon: localReference,
      model: {
        type: 'local-ref',
        left: 100,
        top: 100,
        width: 100,
        height: 100,
        fillStyle: '#fff',
        strokeStyle: '#000',
        alpha: 1,
        hidden: false,
        lineWidth: 1,
        lineDash: 'solid',
        lineCap: 'butt'
      }
    },
    {
      type: 'global reference',
      description: 'global reference',
      icon: globalReference,
      model: {
        type: 'global-ref',
        left: 100,
        top: 100,
        width: 100,
        height: 100,
        fillStyle: '#fff',
        strokeStyle: '#000',
        alpha: 1,
        hidden: false,
        lineWidth: 1,
        lineDash: 'solid',
        lineCap: 'butt'
      }
    }
  ]
}

function dataSources() {
  return [
    {
      type: 'system',
      description: 'system',
      icon: globalReference,
      model: {
        type: 'system',
        dimension: {
          width: 120,
          height: 100,
          depth: 120
        },
        source: 'fps',
        period: 1000
      }
    },
    {
      type: 'random',
      description: 'random',
      icon: globalReference,
      model: {
        type: 'random',
        dimension: {
          width: 120,
          height: 100,
          depth: 120
        },
        format: 'integer',
        period: 5000,
        count: 1
      }
    }
  ]
}

function forms() {
  return [
    {
      type: 'dom',
      description: 'dom',
      icon: globalReference,
      model: {
        type: 'dom',
        tagName: 'video',
        dimension: {
          width: 300,
          height: 200
        },
        translate: {
          x: 0,
          y: 0,
          z: 0
        },
        options: {
          src: 'http://techslides.com/demos/sample-videos/small.webm',
          controls: true,
          autoplay: true,
          style: 'background-color: gray;'
        }
      }
    }
  ]
}

function chartAndGauge() {
  return [
    {
      type: 'd3-bar-chart',
      description: 'd3-bar-chart',
      icon: globalReference,
      model: {
        type: 'd3-bar-chart',
        dimension: {
          width: 600,
          height: 400,
          depth: 1
        },
        options: {
          style: 'background-color: lightgray;'
        }
      }
    },
    {
      type: 'd3-line-chart',
      description: 'd3-line-chart',
      icon: globalReference,
      model: {
        type: 'd3-line-chart',
        dimension: {
          width: 600,
          height: 400,
          depth: 1
        },
        options: {
          style: 'background-color: lightgray;'
        }
      }
    },
    {
      type: 'd3-pie-chart',
      description: 'd3-pie-chart',
      icon: globalReference,
      model: {
        type: 'd3-pie-chart',
        dimension: {
          width: 600,
          height: 400,
          depth: 1
        },
        options: {
          style: 'background-color: lightgray;'
        }
      }
    }
  ]
}

const STATE = {
  groupList: [
    'line',
    'shape',
    'textAndMedia',
    'chartAndGauge',
    'table',
    'container',
    'dataSource',
    'IoT',
    '3D',
    'warehouse',
    'form',
    'etc'
  ].map(group => {
    return {
      name: group,
      description: 'Group ' + group
    }
  }),
  groupComponents: {
    shape: shapes(),
    line: lines(),
    textAndMedia: textAndMedias(),
    chartAndGauge: chartAndGauge(),
    table: [],
    container: groupContainer(),
    dataSource: dataSources(),
    IoT: [],
    '3D': [],
    warehouse: [],
    form: forms(),
    etc: etc()
  }
}

export default function(state = STATE, action) {
  switch (action.type) {
    case 'MODULE-PLUGIN':
      let elements = action.elements
      let newstate = { ...state }

      for (let element in elements) {
        let templates = elements[element].templates

        templates.forEach(template => {
          let group = newstate.groupComponents[template.group]
          if (!group) {
            console.warn('Invalid group', group, template)
          } else {
            group.push(template)
          }
        })
      }

      return newstate

    default:
      return state
  }
}
