import {
    IconButton,
    Paper,
    SvgIcon,
    Styles,
} from 'material-ui';
import React from 'react';
import { Line, Rect, Circle, Ellipse, Measure } from '../components/Shape';
import * as MODE from '../constants/Mode';
import * as SHAPE from '../constants/Shape';

const Style = {
    Toolbar: {
        width: '100%',
        display: 'flex',
        alignItems: 'center',
    },
    Separator: {
        flex: '0 0 1px',
        height: 24,
        backgroundColor: Styles.Colors.grey600,
        margin: '0 2px',
    },
    SelectedColor: Styles.Colors.pink500,
};

const ModeButton = ({name, mode, icon, setMode}) => (
    <IconButton
        iconClassName="material-icons"
        iconStyle={{
            color: name === mode
                ? Style.SelectedColor
                : null,
        }}
        onTouchTap={() => setMode(name)}>
        {icon}
    </IconButton>
);

const ShapeButton = ({
    name,
    shape,
    fill,
    stroke,
    icon,
    children,
    setShape,
}) => {
    if (icon) {
        const style = name === shape
            ? {
                color: fill === 'none' ? stroke : fill,
            } : {
                color: Styles.Colors.grey300,
            };

        return (
            <IconButton
                iconClassName="material-icons"
                iconStyle={style}
                onTouchTap={() => setShape(name)}>
                {icon}
            </IconButton>
        );
    }

    const svgStyle = name === shape
        ? {
            stroke,
            fill,
        } : {
            stroke: Styles.Colors.grey300,
            fill: 'none',
        };

    return (
        <IconButton onTouchTap={() => setShape(name)}>
            <SvgIcon>
                <g style={svgStyle}>
                    {children}
                </g>
            </SvgIcon>
        </IconButton>
    );
};

export const Toolbar = (props) => {
    const {
        mode,
        shape,
        fill,
        stroke,
        snap,
        open,
        setMode,
        setShape,
        setSnap,
    } = props;
    const menuProps = {
        mode,
        setMode,
    };
    const shapeProps = {
        shape,
        fill,
        stroke,
        setShape,
    };

    return (
        <Paper style={Style.Toolbar}>
            <ModeButton
                {...menuProps}
                name={MODE.MOVE}
                icon="open_with" />
            <ModeButton
                {...menuProps}
                name={MODE.EDIT}
                icon="editor" />
            <ModeButton
                {...menuProps}
                name={MODE.ERASE}
                icon="delete" />
            <div style={Style.Separator} />
            <IconButton
                iconClassName="material-icons"
                iconStyle={{
                    color: snap ? null : Styles.Colors.grey300,
                }}
                onTouchTap={() => setSnap(!snap)}>
                grid_on
            </IconButton>
            {mode === MODE.EDIT ? (
                <div style={Style.Toolbar}>
                    <div style={Style.Separator} />
                    <ShapeButton
                        {...shapeProps}
                        name={SHAPE.PIECE}
                        icon="place" />
                    <ShapeButton
                        {...shapeProps}
                        name={SHAPE.LINE}>
                        <Line x1={24} y1={0} x2={0} y2={24} />
                    </ShapeButton>
                    <ShapeButton
                        {...shapeProps}
                        name={SHAPE.RECT}>
                        <Rect x={0} y={0} width={24} height={24} />
                    </ShapeButton>
                    <ShapeButton
                        {...shapeProps}
                        name={SHAPE.CIRCLE}>
                        <Circle cx={12} cy={12} r={11} />
                    </ShapeButton>
                    <ShapeButton
                        {...shapeProps}
                        name={SHAPE.ELLIPSE}>
                        <Ellipse cx={12} cy={12} rx={11} ry={6} />
                    </ShapeButton>
                    <ShapeButton
                        {...shapeProps}
                        name={SHAPE.TEXT}
                        icon="text_fields" />
                    <ShapeButton
                        {...shapeProps}
                        name={SHAPE.MEASURE}>
                        <Measure
                            x1={0} y1={24} x2={24} y2={0}
                            stroke={
                                shape === SHAPE.MEASURE
                                ? stroke
                                : Styles.Colors.grey300
                            }
                            fill={
                                shape === SHAPE.MEASURE
                                ? fill
                                : Styles.Colors.grey300
                            }
                            fontSize={10}
                            gridSize={24} />
                    </ShapeButton>
                    <div style={Style.Separator} />
                    <IconButton
                        iconClassName="material-icons"
                        onTouchTap={() => open('editStyle')}>
                        color_lens
                    </IconButton>
                </div>
            ) : null}
        </Paper>
    );
};
@@ -377,23 +377,221 @@
 enter',%0A
+        overflow: 'hidden',%0A        overflowX: 'auto',%0A        WebkitOverflowScrolling: 'touch',%0A    %7D,%0A    Group: %7B%0A        flex: '0 1 auto',%0A        display: 'flex',%0A        alignItems: 'center',%0A
     %7D,%0A
-
     Sepa
@@ -766,16 +766,82 @@
 ink500,%0A
+    Button: %7B%0A        flex: '0 0 48px',%0A        width: 48,%0A    %7D,%0A
 %7D;%0A%0Acons
@@ -1064,32 +1064,61 @@
 ull,%0A        %7D%7D%0A
+        style=%7BStyle.Button%7D%0A
         onTouchT
@@ -1619,16 +1619,53 @@
 %7Bstyle%7D%0A
+                style=%7BStyle.Button%7D%0A
         
@@ -1987,16 +1987,37 @@
 onButton
+ style=%7BStyle.Button%7D
  onTouch
@@ -3208,32 +3208,69 @@
              %7D%7D%0A
+                style=%7BStyle.Button%7D%0A
                 
@@ -3416,39 +3416,37 @@
 iv style=%7BStyle.
-Toolbar
+Group
 %7D%3E%0A             

Modify toolbar for iPhone