import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import Diff from './components/Diff';
import Label from './components/Label';
import Value from './components/Value';
import GridItemChart from './components/GridItemChart';
import ArrowIcon from '../ArrowIcon';
import Helper from '../Helper';
import PercentageBar from '../PercentageBar';

const Item = styled.li`
  display: flex;
  list-style: none;
  box-sizing: border-box;
  width: ${props => props.width};
  justify-content: center;

  margin: 0 0 ${props => props.inline ? '' : '1.375rem'};

  &:first-child > div {
    padding-left: ${props => (props.withChart ? '0' : '')};
    padding-right: ${props => (props.withChart ? '1.5rem' : '')};
  }

  &:last-child > div {
    padding-left: ${props => (props.withChart ? '1.5rem' : '')};
    padding-right: ${props => (props.withChart ? '0' : '')};
  }
`;

const TableItem = styled.div`
  display: flex;
  box-sizing: border-box;
  flex-grow: 1;
  width: ${props => props.width};
  padding-left: 0;
  padding-right: 1.5rem;
`;

const Container = styled.div`
  width: 100%;
`;

const ValueWrapper = styled.div`
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;

  h3 {
    margin: 0
  }
`;

const GridItemChartContainer = styled.div`
  border: 1px solid #CCDAE5;
  border-width: 0 0 2px;
  margin: 0 0 1rem;
`;
const ArrowIconContainer = styled.span`
  display: flex;
  margin-left: 8px;
  align-items: center;
`;

const PercentageBarContainer = styled.div`
  width: ${props => props.width};
`;

function filterDailyDataMetrics(dailyData, metricLabel) {
  return dailyData.map(day => ({
    ...day,
    metric: day.metrics.filter(metric => metric.label === metricLabel).shift(),
  }));
}

const GridItem = ({
  chartType,
  chartSize,
  controlMinMax,
  customLabel,
  dailyData,
  gridWidth,
  hideDiff,
  metric,
  prefix,
  showArrowIcon,
  showPercentSign,
  smaller,
  standalone,
  tooltip,
  inline,
}) => {
  const dailyMetricData = filterDailyDataMetrics(dailyData, metric.label);

  if (metric.key === 'spend' && metric.paid) {
    const [currency, value] = metric.paid.split('_');
    metric.currency = currency;
    metric.paid = parseFloat(value);
  }

  const valuePaid = parseFloat(metric.paid);
  const valueOrganic = parseFloat(metric.value);

  const content = (
    <Container>
      {dailyData.length > 1 &&
        <GridItemChartContainer>
          <GridItemChart dailyData={dailyMetricData} chartType={chartType} chartSize={chartSize} controlMinMax={controlMinMax}/>
        </GridItemChartContainer>
      }
      <Label tooltip={tooltip} >
        <Helper label={metric.label}>
          {!customLabel && metric.label}
          {customLabel && customLabel}
        </Helper>
      </Label>
      <ValueWrapper>
        <Value
          hideValue={metric.key === 'spend' && !metric.paid}
          currency={metric.currency}
          smaller={smaller}
          showPercentSign={showPercentSign}
          >
          {!!metric.paid ? valueOrganic + valuePaid : valueOrganic}
        </Value>
        {!hideDiff && <Diff diff={metric.diff} />}
        {hideDiff && showArrowIcon &&
          <ArrowIconContainer>
            <ArrowIcon diff={metric.diff} />
          </ArrowIconContainer>
        }
      </ValueWrapper>
      {!!metric.paid && metric.key !== 'spend' &&
        <PercentageBarContainer width={dailyData.length ? "95%" : "75%"}>
          <PercentageBar organic={valueOrganic} paid={valuePaid} />
        </PercentageBarContainer>}
    </Container>
  );

  if (standalone) {
    return (
      <TableItem key={metric.label} width={gridWidth} inline={inline} withChart={dailyData.length > 0} chartType={chartType}>
        {prefix && prefix}
        {content}
      </TableItem>
    );
  }

  return (
    <Item key={metric.label} width={gridWidth} inline={inline} withChart={dailyData.length > 0} chartType={chartType}>
      {prefix && prefix}
      {content}
    </Item>
  );
};

GridItem.defaultProps = {
  chartType: 'column',
  controlMinMax: false,
  customLabel: null,
  dailyData: [],
  gridWidth: '25%',
  hideDiff: false,
  prefix: null,
  showArrowIcon: false,
  showPercentSign: false,
  smaller: false,
  standalone: false,
  tooltip: null,
  inline: false,
};

GridItem.propTypes = {
  chartType: PropTypes.string,
  chartSize: PropTypes.string,
  controlMinMax: PropTypes.bool,
  customLabel: PropTypes.element,
  dailyData: PropTypes.arrayOf(PropTypes.shape({
    day: PropTypes.string,
    metrics: PropTypes.arrayOf(PropTypes.shape({
      currency: PropTypes.string,
      diff: PropTypes.number,
      label: PropTypes.string,
      value: PropTypes.number,
    })),
  })),
  gridWidth: PropTypes.string,
  hideDiff: PropTypes.bool,
  metric: PropTypes.shape({
    currency: PropTypes.string,
    diff: PropTypes.number,
    label: PropTypes.string,
    value: PropTypes.number,
  }).isRequired,
  prefix: PropTypes.element,
  showArrowIcon: PropTypes.bool,
  showPercentSign: PropTypes.bool,
  smaller: PropTypes.bool,
  standalone: PropTypes.bool,
  tooltip: PropTypes.string,
  inline: PropTypes.bool,
};

export default GridItem;