import React, { Component } from 'react'
import {
  FlexGrid, Content, Container,
  AdminItemsViewTable,
  Table, Button
} from 'components'
import {
  AddItemAboutContainer,
  AddItemPhotoContainer,
  SpecialSetupContainer
} from 'containers'
import { adminLink } from 'config'
import s from './AdminItemsView.sass'


class ToggleButton extends Component {
  state = {value: this.props.value};
  componentWillMount() {
    this.setState({value: this.props.value})
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
      this.setState({value: nextProps.value});
    }
  }
  onClick = () => {
    if (!this.props.onChange)
      return;

    const { field, id, value } = this.props;
    const newValue = !value;
    this.props.onChange({
      [field]: newValue,
      id
    });

    this.setState({value: newValue})
  };
  render() {
    const { children } = this.props;
    const { onClick } = this;
    const { value } = this.state;
    return (
      <FlexGrid className={s.toggle} direction="column"
                justify="center" align="center">
        <Content size="5" center gray>{children}</Content>
        <Table.RowItem className={s.toggle__icon} tag="span"
                       onClick={onClick}
                       circle circleActive={value}/>
      </FlexGrid>
    )
  }
}

export default class AdminItemsView extends Component {
  render() {
    const {
      data, parent_id, brands, categories,
      onChange, onDelete, onAboutChange,
      aboutData, onSave, onColorChange, onSpecialChange
    } = this.props;

    if (!data || data.id == null)
      return null;

    const { id } = data;

    return (
      <div className={s.wrapper}>
        <AdminItemsViewTable data={data} brands={brands}
                             onChange={onChange}
                             categories={categories} />
        <div className={s.line} />
        <Container className={s.content}>
          <FlexGrid justify="start" align="start">
            <div className={s.grid}>
              <FlexGrid className={s.toggle__wrapper}
                        justify="start" align="start">
                <ToggleButton id={id} onChange={onChange} field="is_top"
                              value={data.is_top}>Топ</ToggleButton>
                <ToggleButton id={id} onChange={onChange} field="is_new"
                              value={data.is_new}>Новинка</ToggleButton>
                <ToggleButton id={id} onChange={onChange} field="is_special_active"
                              value={data.is_special_active}>Акция</ToggleButton>
                <ToggleButton id={id} onChange={onChange} field="warranty"
                              value={data.warranty}>Гарантия</ToggleButton>
              </FlexGrid>

              <Content className={s.title} regular size="5">
                Изображения
              </Content>
              <AddItemPhotoContainer __onChange={onColorChange} color={data.color} custom/>
              <SpecialSetupContainer onChange={onSpecialChange} />
            </div>
            <div className={s.grid}>
              <AddItemAboutContainer data={aboutData} custom
                                     onSave={onSave}
                                     __onChange={onAboutChange}/>
            </div>
          </FlexGrid>
          <div className={s.actions}>
            <Button type="blue" to={`${adminLink.path}/items/${parent_id}`}>
              Отредактировать модель
            </Button>
            <Button className={s.btn} type="pink"
                    onClick={onDelete}>
              Удалить
            </Button>
          </div>
        </Container>
      </div>
    )
  }
}
