import React, { Component } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { findIndex } from 'lodash-es';
import { style as S } from '../styles/Swatches';
import { Swatch } from './Swatch';
export class Swatches extends Component {
    constructor(props) {
        super(props);
        this.onSelect = (swatch) => {
            const option = {
                value: swatch.value,
                name: swatch.name
            };
            this.setState({
                selected: {
                    index: swatch.index,
                    swatch: option
                }
            });
            const { onChangeSwatch } = this.props;
            if (onChangeSwatch) {
                onChangeSwatch(swatch.value);
            }
        };
        this._renderSwatch = (item, i) => {
            const { selected } = this.state;
            const { colorContainerStyle, selectedColorContainerStyle, disabledColorContainerStyle, colorStyle, selectedColorStyle, disabledColorStyle, textContainerStyle, selectedTextContainerStyle, disabledTextContainerStyle, textStyle, selectedTextStyle, disabledTextStyle, imageContainerStyle, selectedImageContainerStyle, disabledImageContainerStyle, imageStyle, selectedImageStyle, disabledImageStyle, renderSwatch, disabled } = this.props;
            return (<View key={i}>
        <Swatch index={i} disabled={disabled || item.available === false} colorContainerStyle={colorContainerStyle} disabledColorContainerStyle={disabledColorContainerStyle} selectedColorContainerStyle={selectedColorContainerStyle} colorStyle={colorStyle} disabledColorStyle={disabledColorStyle} selectedColorStyle={selectedColorStyle} textContainerStyle={textContainerStyle} disabledTextContainerStyle={disabledTextContainerStyle} selectedTextContainerStyle={selectedTextContainerStyle} textStyle={textStyle} disabledTextStyle={disabledTextStyle} selectedTextStyle={selectedTextStyle} imageContainerStyle={imageContainerStyle} disabledImageContainerStyle={disabledImageContainerStyle} selectedImageContainerStyle={selectedImageContainerStyle} imageStyle={imageStyle} disabledImageStyle={disabledImageStyle} selectedImageStyle={selectedImageStyle} selected={i === selected.index} onSelect={this.onSelect} render={renderSwatch} {...item}/>
      </View>);
        };
        this._renderLabel = (swatch) => {
            const { title, labelContainerStyle, labelTitleStyle, labelValueStyle, renderLabel } = this.props;
            const { selected } = this.state;
            const name = selected.swatch.name;
            if (renderLabel) {
                return renderLabel(swatch);
            }
            return (<View style={[S.labelContainer, labelContainerStyle]}>
        <Text style={[S.labelTitle, labelTitleStyle]}>{title || 'Selected'}: </Text>
        <Text style={labelValueStyle}>{name || ''}</Text>
      </View>);
        };
        this.toggleMoreLess = () => {
            this.setState({ showMore: !this.state.showMore });
        };
        this._renderMoreLess = () => {
            const { shouldShowMoreLess, showMore } = this.state;
            const { textStyle, moreLessStyle, renderMoreLess } = this.props;
            let moreLess;
            if (renderMoreLess) {
                moreLess = renderMoreLess(showMore);
            }
            else {
                moreLess = <Text style={[S.textItem, textStyle]}>{showMore ? '-' : '+'}</Text>;
            }
            if (shouldShowMoreLess) {
                return (<TouchableOpacity accessibilityLabel='Toggle More/Less Swatches' activeOpacity={0.8} onPress={this.toggleMoreLess} style={moreLessStyle}>
          {moreLess}
        </TouchableOpacity>);
            }
            else {
                return null;
            }
        };
        this.state = {
            selected: {
                index: null,
                swatch: {
                    value: null,
                    name: null
                }
            },
            shouldShowMoreLess: props.maxSwatches ? (props.maxSwatches < props.items.length) : false,
            showMore: false
        };
    }
    static getDerivedStateFromProps(nextProps) {
        const { defaultValue, items } = nextProps;
        if (defaultValue) {
            const defaultIndex = findIndex(items, { value: defaultValue });
            if (defaultIndex > -1) {
                const defaultSwatch = items[defaultIndex];
                return {
                    selected: {
                        index: defaultIndex,
                        swatch: {
                            value: defaultSwatch.value,
                            name: defaultSwatch.name
                        }
                    }
                };
            }
        }
        return null;
    }
    render() {
        const { items, style, maxSwatches, label } = this.props;
        const { shouldShowMoreLess, showMore } = this.state;
        const { swatch } = this.state.selected;
        let displayItems = [...items];
        if (shouldShowMoreLess && !showMore) {
            displayItems = displayItems.slice(0, maxSwatches);
        }
        return (<View>
        {label && this._renderLabel(swatch)}
        <View style={[S.container, style]}>
          {displayItems.map(this._renderSwatch)}
          {this._renderMoreLess()}
        </View>
      </View>);
    }
}
//# sourceMappingURL=Swatches.js.map