import React, { FunctionComponent } from "react";
import { Link } from "gatsby";
// import { ButtonToolbar, DropdownButton, MenuItem } from "react-bootstrap";
// import { connect } from "react-redux";
// import {changeColor} from './../../actions/colorActions';

// import COLOR from "./../../constants/colors";
import { ROUTES } from "../constants/routes";
// import { blue, green, lime, orange, pink, purple, red, yellow } from './../../assets/images/colors'

export const Footer: FunctionComponent<{}> = () => {
  return (
    <footer>
      <div className="row">
        <div className="col-md-7">
          <p className="footerText">
            &copy; 2021 Rick van Lieshout
            <span className="links">
              <Link to={ROUTES.cookies}>cookies</Link> /{" "}
              <Link to={ROUTES.disclaimer}> disclaimer</Link>
            </span>
          </p>
        </div>
        <div className="col-md-5">
          <ul className="social">
            {/* <li>
            <ButtonToolbar>
              <DropdownButton className="plain-dropdown" title={<img style={{ marginRight: "3px", width: "21px" }} src={`/assets/images/colors/${this.props.color.split("-")[1]}.png`} alt="select color" />} dropup id="split-button-dropup">
                <MenuItem onSelect={() => { this.props.changeColor(COLOR.RED); }} >   <img src={red} alt="icon to change color to red" />    {colors.red}</MenuItem>
                <MenuItem onSelect={() => { this.props.changeColor(COLOR.YELLOW); }} ><img src={yellow} alt="icon to change color to yellow" /> {colors.yellow}</MenuItem>
                <MenuItem onSelect={() => { this.props.changeColor(COLOR.GREEN); }} > <img src={green} alt="icon to change color to green" />  {colors.green}</MenuItem>
                <MenuItem onSelect={() => { this.props.changeColor(COLOR.LIME); }} >  <img src={lime} alt="icon to change color to lime" />   {colors.lime}</MenuItem>
                <MenuItem onSelect={() => { this.props.changeColor(COLOR.PINK); }} >  <img src={pink} alt="icon to change color to pink" />   {colors.pink}</MenuItem>
                <MenuItem onSelect={() => { this.props.changeColor(COLOR.PURPLE); }} ><img src={purple} alt="icon to change color to purple" /> {colors.purple}</MenuItem>
                <MenuItem onSelect={() => { this.props.changeColor(COLOR.ORANGE); }} ><img src={orange} alt="icon to change color to orange" /> {colors.orange}</MenuItem>
                <MenuItem onSelect={() => { this.props.changeColor(COLOR.BLUE); }} >  <img src={blue} alt="icon to change color to blue" />   {colors.blue}</MenuItem>
              </DropdownButton>
            </ButtonToolbar>
          </li> */}
            <li>
              <a href="https://github.com/mastermindzh" id="github-footer-image">
                <i className="fa fa-github" />
              </a>
            </li>
            <li>
              <a href="https://www.linkedin.com/in/rickvanlieshout/" id="linkedin-footer-image">
                <i className="fa fa-linkedin" />
              </a>
            </li>
            <li>
              <a href="https://www.facebook.com/rickvanlieshoutt" id="facebook-footer-image">
                <i className="fa fa-facebook" />
              </a>
            </li>
            <li>
              <a href="https://twitter.com/mastermindzh" id="twitter-footer-image">
                <i className="fa fa-twitter" />
              </a>
            </li>
          </ul>
        </div>
      </div>
    </footer>
  );
};

// class Footer extends Component {
//   render() {

//     // const colors = this.props.language === 'en'? {
//     //   red: "red",
//     //   yellow: "yellow",
//     //   green: "green",
//     //   lime: "lime",
//     //   pink: "pink",
//     //   purple: "purple",
//     //   orange: "orange",
//     //   blue: "blue",
//     // }:
//     // {
//     //   red: "rood",
//     //   yellow: "geel",
//     //   green: "groen",
//     //   lime: "lime",
//     //   pink: "roze",
//     //   purple: "paars",
//     //   orange: "oranje",
//     //   blue: "blauw",
//     // }

//     return (
//       <footer>
//         <div className="row">

//           <div className="col-md-7">
//             <p className="footerText">
//               &copy; 2021 Rick van Lieshout
//                 <span className="links">
//                 <Link to={routes.cookies}>cookies</Link> /{" "}
//                 <Link to={routes.disclaimer}> disclaimer</Link>
//               </span>
//             </p>
//           </div>
//           <div className="col-md-5">
//             <ul className="social">
//               {/* <li>
//                 <ButtonToolbar>
//                   <DropdownButton className="plain-dropdown" title={<img style={{ marginRight: "3px", width: "21px" }} src={`/assets/images/colors/${this.props.color.split("-")[1]}.png`} alt="select color" />} dropup id="split-button-dropup">
//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.RED); }} >   <img src={red} alt="icon to change color to red" />    {colors.red}</MenuItem>
//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.YELLOW); }} ><img src={yellow} alt="icon to change color to yellow" /> {colors.yellow}</MenuItem>
//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.GREEN); }} > <img src={green} alt="icon to change color to green" />  {colors.green}</MenuItem>
//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.LIME); }} >  <img src={lime} alt="icon to change color to lime" />   {colors.lime}</MenuItem>
//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.PINK); }} >  <img src={pink} alt="icon to change color to pink" />   {colors.pink}</MenuItem>
//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.PURPLE); }} ><img src={purple} alt="icon to change color to purple" /> {colors.purple}</MenuItem>
//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.ORANGE); }} ><img src={orange} alt="icon to change color to orange" /> {colors.orange}</MenuItem>
//                     <MenuItem onSelect={() => { this.props.changeColor(COLOR.BLUE); }} >  <img src={blue} alt="icon to change color to blue" />   {colors.blue}</MenuItem>
//                   </DropdownButton>
//                 </ButtonToolbar>
//               </li>
//               <li>
//                 <ButtonToolbar>
//                   <DropdownButton className="plain-dropdown" title={<img style={{ marginRight: "3px" }} src={this.props.language == 'en' ? flagEn : flagNl} alt="select language" />} dropup id="split-button-dropup2">
//                     <MenuItem onSelect={() => { this.props.changeLanguage("nl"); }}><img src={flagNl} alt="dutch" /> Nederlands</MenuItem>
//                     <MenuItem onSelect={() => { this.props.changeLanguage("en"); }}><img src={flagEn} alt="english" /> English</MenuItem>
//                   </DropdownButton>
//                 </ButtonToolbar>
//               </li> */}
//               <li>
//                 <a href="https://github.com/mastermindzh" id="github-footer-image">
//                   <i className="fa fa-github" />
//                 </a>
//               </li>
//               <li>
//                 <a href="https://www.linkedin.com/in/rickvanlieshout/" id="linkedin-footer-image">
//                   <i className="fa fa-linkedin" />
//                 </a>
//               </li>
//               <li>
//                 <a href="https://www.facebook.com/rickvanlieshoutt" id="facebook-footer-image">
//                   <i className="fa fa-facebook" />
//                 </a>
//               </li>
//               <li>
//                 <a href="https://twitter.com/mastermindzh" id="twitter-footer-image">
//                   <i className="fa fa-twitter" />
//                 </a>
//               </li>
//             </ul>
//           </div>
//         </div>
//       </footer>
//     );
//   }
// }

// Footer.propTypes = {
//   color: PropTypes.string,
//   language: PropTypes.string,
//   changeColor: PropTypes.func,
//   changeLanguage: PropTypes.func,
// };

// // function mapStateToProps(state) {
// //   return {
// //     color: state.colorReducer.color,
// //     language: state.languageReducer.language,
// //   };
// // }

// // export default connect(mapStateToProps, { changeColor, changeLanguage,
// // })(Footer);
