import React from 'react';
import { makeStyles,withStyles, Theme, createStyles} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { IProduct } from './model/product.model';
import { c1, c2 } from './test-data/test-data';
import { ICriterion } from './model/criterion.model';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import ClearRoundedIcon from '@material-ui/icons/ClearRounded';
import Rating from '@material-ui/lab/Rating';
import { Avatar, IconButton } from '@material-ui/core';
import { IProductsComparatorProps } from './model/productsComparatorProps.model';
import DeleteOutlineOutlinedIcon from '@material-ui/icons/DeleteOutlineOutlined';
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
import OpenInNewIcon from '@material-ui/icons/OpenInNew';





const useStyles = makeStyles({
  table: {
    minWidth: 650,
  },

  image: {
    maxWidth: 80,
  },
  small: {
    width: '20px',
    height: '20px',
  },
});


let products = [c1, c2];  /*input Data / Test Data */


interface ICriteriaColumn {
  criteriaName?: string,
  criteria?: ICriterion[];

}

interface IFeaturesColumn {
  categoryName?: string,
  fCriteria?: ICriteriaColumn[];
}

/*create and fill Table */

function createFeaturesData(products: IProduct[]) {
  const allcategories = [] as IFeaturesColumn[];

  /* Step1 : create features column */
  products.forEach(p => {
    if (p.categories) {
      p.categories.forEach(cat => {
        const foundCategorie = allcategories.find(o => (o.categoryName === cat.categorieName));
        if (!foundCategorie) {
          allcategories.push({
            categoryName: cat.categorieName, fCriteria: cat.criteria?.map(
              cr => { return { criteriaName: cr.criterionName, criteria: [] } })
          });

        } else {
          const missingCriteria = cat.criteria?.filter(cr => !foundCategorie.fCriteria?.map(
            criteri => criteri.criteriaName).includes(cr.criterionName));
          if (missingCriteria && missingCriteria.length > 0) {
            missingCriteria.forEach(missCriteria =>
              foundCategorie.fCriteria?.push({ criteriaName: missCriteria.criterionName, criteria: [] }));
          }
        }
      });
    }
  });

  /*Step 2: fill data in the Table */
  allcategories.forEach((cat) => {
    cat.fCriteria?.forEach(cr => {
      products.forEach(p => {

        const foundCriteria = p.categories?.find(catego => catego.categorieName === cat.categoryName)?.criteria?.find(
          productCriteria => {
            return productCriteria.criterionName === cr.criteriaName;
          });

        if (foundCriteria) {
          cr.criteria?.push(foundCriteria);
        } else {
          cr.criteria?.push({ criterionName: 'NOT_DEFINED', value: '_' });
        }
      }
      )

    });
  });

  return allcategories;
}

const StyledTableRow = withStyles((theme: Theme) =>
  createStyles({
    root: {
      '&:nth-of-type(odd)': {
        backgroundColor: theme.palette.action.hover,
      },
    },
  }),
)(TableRow);

function ProductsComparator(props:IProductsComparatorProps) {
  const classes = useStyles();
  if(props.products){
    products=props.products;
  }
  const featuresColumn = createFeaturesData(products) as IFeaturesColumn[];
  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} size="small" aria-label="simple table">

        <TableHead>
          <TableRow>
            <TableCell style={{border:'none'}} />
            {products.map((p) => (
              <TableCell align="center" style={{border:'none'}}>

                <div ><img src={p.imageSrc} style={props.imageStyle?props.imageStyle:{maxWidth:80}} /></div>
                <div style={props.nameStyle?props.nameStyle:{fontWeight:'bold'}}>{p.brand?p.brand+ ' ' + p.name:p.name}</div>
                
                <div>
                    <Rating name="read-only" precision={0.5} value={p.rating} readOnly />
                </div>

                {(p.price && p.currency) && <div style={{fontSize:'24px'}}> {p.price + '' + p.currency}</div>}
                {(p.quantityPrices && p.quantityPrices.length>0) && 
                <div style={props.priceStyle?props.priceStyle:{fontSize:'24px'}}> 
                {p.quantityPrices.map(qp=>{
                  return <div>
                  {qp.itemPrice + '' + p.currency} X {qp.quantity}
                  </div>
                })}
                
                {(p.colors && p.colors.length>0) && <div style={{display:'flex',justifyContent:'center'}}> {p.colors.map((c) => {
                 return <Avatar  className={classes.small} style={{backgroundColor:c.colorCode}} >  </Avatar>}) }
                </div>
                
                }

         
                  </div>}
                  <div style={{margin:'2%'}}>
                   {props.showAddToCartIconButton && <IconButton style={{margin:'0,5%'}} onClick={()=>{props.addToCartAction(p);}}><AddShoppingCartIcon></AddShoppingCartIcon></IconButton>}
                   {props.showDeleteIconButton && <IconButton style={{margin:'0,5%'}} onClick={()=>{props.deleteAction(p);}}><DeleteOutlineOutlinedIcon></DeleteOutlineOutlinedIcon></IconButton>}
                   {props.showOpenProductDetailsIconButton && <IconButton style={{margin:'0,5%'}} onClick={()=>{props.openProductDetailsAction(p);}}><OpenInNewIcon></OpenInNewIcon></IconButton>}

                  </div> 
              </TableCell>

            ))}
          </TableRow>
        </TableHead>


        <TableBody>

          {featuresColumn.map((c) => {
            return <React.Fragment>
              <TableRow  key={c.categoryName} style={props.categoryStyle?props.categoryStyle:{ color: '#002884', fontWeight:'bold', fontSize:'20px',borderBottom:'solid',borderBottomColor:'lightgrey', borderBottomWidth:'1px' }}>
                {c.categoryName}
              </TableRow>

              { c.fCriteria?.map(row => {
                return <StyledTableRow >
                  <TableCell style={props.criteriaStyle?props.criteriaStyle:{borderBlockColor:'transparent'}}>{row.criteriaName}</TableCell>
                  {row.criteria?.map(crit => {

                    return <TableCell style={props.criteriaStyle?props.criteriaStyle:{border:'none'}}> {crit.value === true ? <CheckRoundedIcon fontSize="small" color="primary" /> : crit.value === false ?
                      <ClearRoundedIcon fontSize="small" color="secondary" /> : crit.value.toString()+' '}{crit.unit? crit.unit:""}</TableCell>
                  })}
                </StyledTableRow>

              })}

            </React.Fragment>
          })}



        </TableBody>
      </Table>
    </TableContainer>
  );
}





export default ProductsComparator;