import React, { Component } from "react";
import { withStyles } from "@material-ui/styles";
import { AppBar, Tabs, Tab, Badge, Paper } from "@material-ui/core";
import ShoppingBasket from "@material-ui/icons/ShoppingBasketOutlined";
import AccountCircle from "@material-ui/icons/AccountCircleOutlined";
import CreditCard from "@material-ui/icons/CreditCardOutlined";
import LiveHelpIcon from "@material-ui/icons/LiveHelpOutlined";
import HelpIcon from "@material-ui/icons/HelpOutline";
import RedeemIcon from "@material-ui/icons/RedeemOutlined";
import SupervisedUserCircleOutlinedIcon from "@material-ui/icons/SupervisedUserCircleOutlined";
import MapIcon from "@material-ui/icons/MapOutlined";
import compose from "recompose/compose";
import { withRouter } from "react-router-dom";
import SpaIcon from '@material-ui/icons/Spa';
import FaceIcon from '@material-ui/icons/Face';
import RemoveRedEyeIcon from '@material-ui/icons/RemoveRedEye';
import PanToolIcon from '@material-ui/icons/PanTool';
import axios from "axios";

const styles = theme => ({
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: theme.palette.background.paper
  },
  flex: {
    flex: 1
  },
  fab: {
    position: "absolute",
    bottom: theme.spacing(3),
    right: theme.spacing(3)
  },
  container: {
    display: "flex",
    flexWrap: "wrap"
  },
  dense: {
    marginTop: theme.spacing(2)
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1)
  },
  margin: {
    margin: theme.spacing(2)
  }
});

class Dashboard extends Component {
  state = {
  
    shops: [],
   
  
  };
  componentDidMount = async () => {
  
    const response = await axios.get("http://localhost:9000/api/shop/all");
    for (let i = 0; i < response.data.length; i++) {
          const resposeimgshop = await axios.get(`http://localhost:9000/api/storage/file/shop/${response.data[i].id}`)
          // console.log(resposeimgshop);
          
          response.data[i].image = ('data:' + resposeimgshop.data.type+';base64,'+resposeimgshop.data.url)
    }
    
    console.log("response", response.data);
    this.setState({
      
      shops: response.data,
      // data: result,
    });

  };
  render() {
    const { classes, history, tab, handleChangeTab } = this.props;
    const badgeOrder = 5;
    const badgeUser = 6;
    const badgeCredit = 2;
    const badgePlace = 12;
    return (
      <div className={classes.root}>
        <AppBar position="static" color="default">
          <Tabs
            value={tab}
            onChange={(event, newValue) => {
              handleChangeTab(event, newValue);
            }}
            variant="scrollable"
            scrollButtons="on"
            indicatorColor="primary"
            textColor="primary"
            aria-label="scrollable force tabs example"
          >
            <Tab
              label="สปาและนวด"
              value={tab.newValue}
              
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeOrder}
                  color="secondary"
                  onClick={e => {
                    e.preventDefault();
                    axios
                      .get(`http://localhost:9000/api/shop/getType/${tab.newValue}`)
                      .then(async response => {
                        for (let i = 0; i < response.data.length; i++) {
                          const resposeimgshop = await axios.get(`http://localhost:9000/api/storage/file/shop/${response.data[i].id}`)
                          console.log(resposeimgshop);
                          
                          response.data[i].image = ('data:' + resposeimgshop.data.type+';base64,'+resposeimgshop.data.url)
                        }
                        this.setState({shops : response.data}
                          )
                        console.log("ค้นหาสำเร็จ", response);
                        // alert("ค้นหาสำเร็จ");
                      })
                      .catch((error) => {
                        console.log(error);
                        // alert("ค้นหาไม่สำเร็จ");
                      });
                  
                  }}
                >
                  <SpaIcon/>
                  
                </Badge>
              }
              className={classes.flex}
            />
            <Tab
              label="ผิวหน้า"
              value={tab.newValue}
              
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeOrder}
                  color="secondary"
                  onClick={e => {
                    e.preventDefault();
                    axios
                      .get(`http://localhost:9000/api/shop/getType/${tab.newValue}`)
                      .then(async response => {
                        for (let i = 0; i < response.data.length; i++) {
                          const resposeimgshop = await axios.get(`http://localhost:9000/api/storage/file/shop/${response.data[i].id}`)
                          console.log(resposeimgshop);
                          
                          response.data[i].image = ('data:' + resposeimgshop.data.type+';base64,'+resposeimgshop.data.url)
                        }
                        this.setState({shops : response.data}
                          )
                        console.log("ค้นหาสำเร็จ", response);
                        // alert("ค้นหาสำเร็จ");
                      })
                      .catch((error) => {
                        console.log(error);
                        // alert("ค้นหาไม่สำเร็จ");
                      });
                  
                  }}
                >
                  <FaceIcon />
                </Badge>
              }
              className={classes.flex}
            />
            <Tab
              label="ขนตาและคิ้ว"
              value={tab.newValue}
              
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeOrder}
                  color="secondary"
                  onClick={e => {
                    e.preventDefault();
                    axios
                      .get(`http://localhost:9000/api/shop/getType/${tab.newValue}`)
                      .then(async response => {
                        for (let i = 0; i < response.data.length; i++) {
                          const resposeimgshop = await axios.get(`http://localhost:9000/api/storage/file/shop/${response.data[i].id}`)
                          console.log(resposeimgshop);
                          
                          response.data[i].image = ('data:' + resposeimgshop.data.type+';base64,'+resposeimgshop.data.url)
                        }
                        this.setState({shops : response.data}
                          )
                        console.log("ค้นหาสำเร็จ", response);
                        // alert("ค้นหาสำเร็จ");
                      })
                      .catch((error) => {
                        console.log(error);
                        // alert("ค้นหาไม่สำเร็จ");
                      });
                  
                  }}
                >
                  <RemoveRedEyeIcon />
                </Badge>
              }
              className={classes.flex}
            />
            <Tab
              label="ทำเล็บ"
              value={tab.newValue}
              
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeOrder}
                  color="secondary"
                  onClick={e => {
                    e.preventDefault();
                    axios
                      .get(`http://localhost:9000/api/shop/getType/${tab.newValue}`)
                      .then(async response => {
                        for (let i = 0; i < response.data.length; i++) {
                          const resposeimgshop = await axios.get(`http://localhost:9000/api/storage/file/shop/${response.data[i].id}`)
                          console.log(resposeimgshop);
                          
                          response.data[i].image = ('data:' + resposeimgshop.data.type+';base64,'+resposeimgshop.data.url)
                        }
                        this.setState({shops : response.data}
                          )
                        console.log("ค้นหาสำเร็จ", response);
                        // alert("ค้นหาสำเร็จ");
                      })
                      .catch((error) => {
                        console.log(error);
                        // alert("ค้นหาไม่สำเร็จ");
                      });
                  
                  }}
                >
                  <PanToolIcon />
                </Badge>
              }
              className={classes.flex}
            />
            <Tab
              label="ชาลอน"
              value={tab.newValue}
              
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeOrder}
                  color="secondary"
                  onClick={e => {
                    e.preventDefault();
                    axios
                      .get(`http://localhost:9000/api/shop/getType/${tab.newValue}`)
                      .then(async response => {
                        for (let i = 0; i < response.data.length; i++) {
                          const resposeimgshop = await axios.get(`http://localhost:9000/api/storage/file/shop/${response.data[i].id}`)
                          console.log(resposeimgshop);
                          
                          response.data[i].image = ('data:' + resposeimgshop.data.type+';base64,'+resposeimgshop.data.url)
                        }
                        this.setState({shops : response.data}
                          )
                        console.log("ค้นหาสำเร็จ", response);
                        // alert("ค้นหาสำเร็จ");
                      })
                      .catch((error) => {
                        console.log(error);
                        // alert("ค้นหาไม่สำเร็จ");
                      });
                  
                  }}
                >
                  <FaceIcon />
                </Badge>
              }
              className={classes.flex}
            />
            <Tab
              label="แต่งหน้าทำผม"
              value={tab.newValue}
              
              icon={
                <Badge
                  className={classes.margin}
                  //badgeContent={badgeOrder}
                  color="secondary"
                  onClick={e => {
                    e.preventDefault();
                    axios
                      .get(`http://localhost:9000/api/shop/getType/${tab.newValue}`)
                      .then(async response => {
                        for (let i = 0; i < response.data.length; i++) {
                          const resposeimgshop = await axios.get(`http://localhost:9000/api/storage/file/shop/${response.data[i].id}`)
                          console.log(resposeimgshop);
                          
                          response.data[i].image = ('data:' + resposeimgshop.data.type+';base64,'+resposeimgshop.data.url)
                        }
                        this.setState({shops : response.data}
                          )
                        console.log("ค้นหาสำเร็จ", response);
                        // alert("ค้นหาสำเร็จ");
                      })
                      .catch((error) => {
                        console.log(error);
                        // alert("ค้นหาไม่สำเร็จ");
                      });
                  
                  }}
                >
                  <FaceIcon />
                </Badge>
              }
              className={classes.flex}
            />
          </Tabs>
        </AppBar>
      </div>
    );
  }
}

export default compose(withStyles(styles), withRouter)(Dashboard);
