import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Journey from './Journey'
import Cluster from './Cluster'
import Stepper from './Stepper'
import {
  text,
  boolean,
  number,
  object,
  array,
  date,
  color,
  button,
  select
} from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';
import { linkTo } from '@storybook/addon-links'
import Accordion from '../Accordion'
import {Box,CloseButton} from '../Utils'


const P = () => Box('30px','40px','red')

const S = () => Box('60px','20px','blue')

const Cus = () => Box('50px','10px','violet')

const G = () => Box('50px','25px','green')

class HL extends React.Component{
  render(){
    return(
      <div className="test" style={{ display : 'flex' }}>
        <div className="test" style={{ width:'100px', height:'.1px', background : 'transparent' , borderTop : '2px dotted #bdbdbd'}}></div>
        <div className="test" style={{ width:'300px', height:'.1px', background : 'transparent' , borderBottom : '2px dotted #bdbdbd'}}></div>
        {this.props.children}
      </div>
    )
  }
}

class VL extends React.Component{
  render(props){
    return(
      <div className="test" style={{ width:'.1px', height:'300px', position: 'relative', background : 'transparent' , borderLeft : '2px dotted #bdbdbd'}}>
        {this.props.children}
      </div>
    )
  }
}

const Circle = props => <CircleInner{...props}/>

class CircleInner extends React.Component{
  render(){
    return(
      <div style={{ width:'15px', height:'15px', position: 'relative', background : 'transparent' , border : '1px solid' , borderColor:this.props.color, borderRadius:'50%',display:'flex','alignItems':'center','justifyContent':'center'}}>
        <div style={{width:'9px', height:'9px',background:this.props.color,borderRadius:'50%'}}></div>
      </div>
    )
  }
}

class VL1 extends React.Component{
  render(){
    return <VL height={this.props.height} />
  }
}

storiesOf('Journey', module)
  .add('base',
    withInfo('Displays components at different positions on a line. At each position there can be a central, primary and secondary component. Give meaningful names to the keys')(
          () => (
           	  <Journey
                orientation='horizontal'
                line={HL}
                points={[
                  {
                    position : 0,
                    align : 'center',
                    renderPrimary : P(),
                    renderCircle : Circle(),
                    renderSecondary : S(),
                    key : 1,
                    onClick : ()=>alert('x')
                  },
                  {
                    position : 30,
                    align : 'center',
                    renderPrimary : P(),
                    renderCircle : Circle(),
                    key : 2
                  },
                  {
                    position : 100,
                    align : 'center',
                    renderCircle : Circle(),
                    renderSecondary : S(),
                    key : 3
                  },
                  {
                    position : 80,
                    renderCircle : Cus(),
                    key : 4
                  }
                ]}
              />
                )
           ))
        .add('cluster',
          withInfo('Groups components along a line. "alpha" is the degree of clustering')(
                () => (
            <Cluster
              orientation='horizontal'
              line={HL}
              alpha = {number('alpha',1)}
              clusters = {[
                {
                  renderLabel : S(),
                  key : 1,
                  points : [
                  {
                    renderPrimary : P(),
                    renderCircle : Circle(),
                    key : 1
                  },
                  {
                    renderPrimary : P(),
                    renderCircle : Circle(),
                    key : 2
                  }]
                },
                {
                  renderLabel : P(),
                  key : 2,
                  points : [
                  {
                    renderPrimary : S(),
                    renderCircle : Circle(),
                    key : 1
                  },
                  {
                    renderPrimary : S(),
                    renderCircle : Circle(),
                    key : 2
                  }]
                },
                {
                  renderLabel : G(),
                  key : 3,
                  points : [
                  {
                    renderPrimary : G(),
                    renderCircle : Circle(),
                    key : 1
                  },
                  {
                    renderPrimary : G(),
                    renderCircle : Circle(),
                    key : 2
                  },
                  {
                    renderPrimary : G(),
                    renderCircle : Circle(),
                    key : 3
                  }]
                }
              ]}
            />
          )
     ))
  .add('stepper',
      withInfo('Displays series of components vertically aligned along a common center')(
      () => (
        <Stepper
          steps={[
            {
              renderCircle : Circle(),
              renderLine : Box('100%','1px','black'),
              renderRight : G()
            },
            {
              renderCircle : Circle(),
              renderLine : Box('100%','1px','pink'),
              renderLeft : S(),
              renderRight : <Accordion
                renderBase={(toggle)=>Box('20px','20px','blue',CloseButton(toggle))}
                renderBody={(toggle)=>Box('200px','20px','red',CloseButton(toggle))}
              />
            },
            {
              renderCircle : Circle(),
              renderLine : Box('100%','1px','yellow'),
              renderLeft : G()
            },
            {
              renderCircle : Circle()
            }
          ]}
        />
      )
   ))