@interface HWQuestionControl : UIControl{

}
@property(nonatomic, strong)UILabel *titleLabel;
@property(nonatomic, strong)UIImageView *imageView;

@end

@interface HWQuestionControl (){

}
@property(nonatomic, strong)UIView *fillView;

@end

@implementation HWQuestionControl

-(id)initWithCoder:(NSCoder *)aDecoder{
    self = [super initWithCoder:aDecoder];
    if(self){
        [self initUI];
    }
    return self;
}

-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if(self){
        [self initUI];
    }
    return self;
}

#pragma mark - UI

-(void)initUI{
    UIColor *highlightColor = [AppStyle buttonHighlightColor];

    self.layer.cornerRadius = (self.frame.size.height / 2);
    self.clipsToBounds = YES;
    [self setBackgroundColor:[UIColor whiteColor]];
    self.titleLabel.textAlignment = NSTextAlignmentLeft;

    //Border
    self.layer.borderWidth = 0;
    self.layer.borderColor = highlightColor.CGColor;

    //Pressed state
    [self addTarget:self action:@selector(touchUpInside:) forControlEvents:UIControlEventTouchUpInside];
    [self addTarget:self action:@selector(wasPressed:) forControlEvents:UIControlEventTouchUpInside];
    [self addTarget:self action:@selector(wasPressed:) forControlEvents:UIControlEventTouchDown];

    //Unpressed state
    [self addTarget:self action:@selector(wasUnpressed:) forControlEvents:UIControlEventTouchDragExit];
    [self addTarget:self action:@selector(wasUnpressed:) forControlEvents:UIControlEventTouchCancel];

    //Label
    self.titleLabel = [[UILabel alloc] initWithFrame:self.bounds];
    self.titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
    self.titleLabel.textColor = highlightColor;
    self.titleLabel.text = @"A difference maker";
    self.titleLabel.textAlignment = NSTextAlignmentLeft;
    [self addSubview:self.titleLabel];

    //Image
    self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"smiley"]];
    self.imageView.translatesAutoresizingMaskIntoConstraints = NO;
    [self addSubview:self.imageView];

    //Fill view
    self.fillView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, self.frame.size.height)];
    self.fillView.translatesAutoresizingMaskIntoConstraints = NO;
    self.fillView.backgroundColor = [AppStyle buttonFillColor];
    self.fillView.userInteractionEnabled = NO;
    [self addSubview:self.fillView];
    [self sendSubviewToBack:self.fillView];

    //Layout
    [self setUpAutoLayout];
}

#pragma mark - Autolayout

-(void)setUpAutoLayout{
    //Verbose autolayout.  A library or categories should help with this but for simplicity I kept it...
    NSDictionary *viewsDictionary = @{@"fillView":self.fillView,
                                      @"imageView":self.imageView,
                                      @"titleLabel":self.titleLabel,
                                      @"hSpacing": @(20)};

    //Image
    NSArray *constraint_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[imageView(30)]"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:viewsDictionary];
    NSArray *constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[imageView(30)]"
                                                                    options:0
                                                                    metrics:nil
                                                                      views:viewsDictionary];
    [self.imageView addConstraints:constraint_H];
    [self.imageView addConstraints:constraint_V];

    NSLayoutConstraint *centerYConstraint = [NSLayoutConstraint constraintWithItem:self.imageView
                                                                         attribute:NSLayoutAttributeCenterY
                                                                         relatedBy:NSLayoutRelationEqual
                                                                            toItem:self
                                                                         attribute:NSLayoutAttributeCenterY
                                                                        multiplier:1.0
                                                                          constant:0.0];
    [self addConstraint:centerYConstraint];

    NSArray *constraint_POS_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[imageView]"
                                                                        options:0
                                                                        metrics:nil
                                                                          views:viewsDictionary];
    [self addConstraints:constraint_POS_H];


    //Label
    constraint_V = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[titleLabel(30)]"
                                                           options:0
                                                           metrics:nil
                                                             views:viewsDictionary];
    [self.titleLabel addConstraints:constraint_V];

    constraint_POS_H = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[imageView]-15-[titleLabel]"
                                                               options:0
                                                               metrics:nil
                                                                 views:viewsDictionary];
    [self addConstraints:constraint_POS_H];

    centerYConstraint = [NSLayoutConstraint constraintWithItem:self.titleLabel
                                                     attribute:NSLayoutAttributeCenterY
                                                     relatedBy:NSLayoutRelationEqual
                                                        toItem:self
                                                     attribute:NSLayoutAttributeCenterY
                                                    multiplier:1.0
                                                      constant:0.0];
    [self addConstraint:centerYConstraint];
}

#pragma mark - Actions

-(void)touchUpInside:(id)sender{
    [self animateFillBarWithPercentage:0.25f];
}

-(void)wasPressed:(id)sender{
    self.layer.borderWidth = 2;
}

-(void)wasUnpressed:(id)sender{
    self.layer.borderWidth = 0;
}

#pragma mark - Animation

-(void)animateFillBarWithPercentage:(CGFloat)fillPercenatage{
    __weak typeof(self)weakSelf = self;

    CGFloat fillWidth = self.frame.size.width * fillPercenatage;
    [UIView animateWithDuration:0.25 delay:0.05 options:UIViewAnimationOptionAllowUserInteraction animations:^{
        weakSelf.fillView.frame = CGRectMake(0, 0, fillWidth, weakSelf.fillView.frame.size.height);
    } completion:^(BOOL finished) {
        NSLog(@"Hurray");
    }];
}

@end