import React from "react";
import { FontIcon, Slider } from "react-md";

import {
  Bold,
  Italic,
  Underline,
  Link,
  Color,
  Spacer,
  Close,
} from "../AllButtons";

const fontList = [
  "Arial",
  "Comic Sans MS",
  "Courier New",
  "Georgia",
  "Impact",
  "Times New Roman",
  "Font Name #1",
  "Font Name #2",
  "Font Name #3",
  "Font Name #4",
  "Font Name #5",
];

const fsIcon = { fontSize: 12, color: "white", display: "inline-block" };
const flStyle = {
  color: "#CCC",
  listStyle: "none",
  margin: 1,
  padding: 4,
  cursor: "pointer",
};

const ButtonFontGroup = (props) => (
  <div>
    <div>
      <Bold />
      <Italic />
      <Underline />
      <Spacer style={{ color: "333" }} />
      <Link />
      <Color />
      <Spacer style={{ color: "333" }} />
      <Close />
    </div>
    <div
      style={{
        backgroundColor: "#444",
        borderRadius: 0,
        height: 150,
        overflowY: "scroll",
        padding: 5,
      }}
    >
      {fontList.map((font, key) => (
        <li key={key} style={{ ...flStyle, fontFamily: font }}>
          {font}
        </li>
      ))}
    </div>
    <Slider
      thumbStyle={{ backgroundColor: "white" }}
      trackStyle={{ backgroundColor: "white" }}
      leftIcon={<FontIcon style={{ ...fsIcon, padding: 5 }}>title</FontIcon>}
      rightIcon={<FontIcon style={{ ...fsIcon, fontSize: 20 }}>title</FontIcon>}
      id="continuous-default-value-slider"
      defaultValue={20}
    />
  </div>
);

export default ButtonFontGroup;