import React from 'react';
import useReducer from 'utils/useReducerHelper';
import { animated } from 'react-spring';
import Zoom from 'styles/animation/Zoom';
import Button from '../button';
import { RadiosContainer, RadioWrap, CheckContainer, Checked, Label, CheckHover, RadioButtonsContainer } from './style';
import { IRadio } from './types';

const ACheck = animated(Checked);

const Radio = function({ options, onChange, value, defaultValue, direction, radioButton, ...rest }: IRadio) {
    const [state, dispatch] = useReducer({ selectedIndex: -1, setDefault: false });
    if (value !== undefined) {
        const find = options.findIndex(o => o.value === value);
        if (~find && find !== state.selectedIndex) {
            dispatch({ selectedIndex: find });
        }
    }
    if (defaultValue !== undefined) {
        const find = options.findIndex(o => o.value === defaultValue);
        if (~find && !state.setDefault) {
            dispatch({ selectedIndex: find, setDefault: true });
        }
    }
    const Wrap = radioButton ? RadioButtonsContainer : RadiosContainer;
    const ItemWrap = radioButton ? Button : RadioWrap;

    return (
        <Wrap direction={direction} {...rest}>
            {options.map((o, index) => {
                return (
                    <ItemWrap
                        key={index}
                        appearance="stroke"
                        className={index === state.selectedIndex ? 'isActive' : ''}
                        onClick={() => {
                            if (!o.disabled) {
                                dispatch({ selectedIndex: index });
                                onChange && onChange(o.value);
                            }
                        }}
                        disabled={o.disabled}
                    >
                        {radioButton ? (
                            o.label
                        ) : (
                            <>
                                <CheckHover disabled={o.disabled}>
                                    <CheckContainer disabled={o.disabled} checked={state.selectedIndex === index}>
                                        <Zoom
                                            trigger={state.selectedIndex === index}
                                            Comp={ACheck}
                                            custom={{ disabled: o.disabled }}
                                        />
                                        {/*{Zoom(state.selectedIndex === index, ACheck, { disabled: o.disabled })}*/}
                                    </CheckContainer>
                                </CheckHover>

                                <Label>{o.label}</Label>
                            </>
                        )}
                    </ItemWrap>
                );
            })}
        </Wrap>
    );
};
Radio.defaultProps = {
    options: [],
    direction: 'horizontal',
    radioButtonStyle: 'stroke',
    radioButton: false,
};
export default Radio;