FLEX/Classes/ViewHierarchy/TreeExplorer/FLEXHierarchyTableViewCell.m

//
//  FLEXHierarchyTableViewCell.m
//  Flipboard
//
//  Created by Ryan Olson on 2014-05-02.
//  Copyright (c) 2020 FLEX Team. All rights reserved.
//

#import "FLEXHierarchyTableViewCell.h"
#import "FLEXUtility.h"
#import "FLEXResources.h"
#import "FLEXColor.h"

@interface FLEXHierarchyTableViewCell ()

/// Indicates how deep the view is in the hierarchy
@property (nonatomic) UIView *depthIndicatorView;
/// Holds the color that visually distinguishes views from one another
@property (nonatomic) UIImageView *colorCircleImageView;
/// A checker-patterned view, used to help show the color of a view, like a photoshop canvas
@property (nonatomic) UIView *backgroundColorCheckerPatternView;
/// The subview of the checker pattern view which holds the actual color of the view
@property (nonatomic) UIView *viewBackgroundColorView;

@end

@implementation FLEXHierarchyTableViewCell

- (id)initWithReuseIdentifier:(NSString *)reuseIdentifier {
    return [self initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:reuseIdentifier];
}

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
        self.depthIndicatorView = [UIView new];
        self.depthIndicatorView.backgroundColor = FLEXUtility.hierarchyIndentPatternColor;
        [self.contentView addSubview:self.depthIndicatorView];
        
        UIImage *defaultCircleImage = [FLEXUtility circularImageWithColor:UIColor.blackColor radius:5];
        self.colorCircleImageView = [[UIImageView alloc] initWithImage:defaultCircleImage];
        [self.contentView addSubview:self.colorCircleImageView];
        
        self.textLabel.font = UIFont.flex_defaultTableCellFont;
        self.detailTextLabel.font = UIFont.flex_defaultTableCellFont;
        #if !TARGET_OS_TV
        self.accessoryType = UITableViewCellAccessoryDetailButton;
        #else
        self.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
        #endif
        // Use a pattern-based color to simplify application of the checker pattern
        
        static UIColor *checkerPatternColor = nil;
        static dispatch_once_t once;
        dispatch_once(&once, ^{
            checkerPatternColor = [UIColor colorWithPatternImage:FLEXResources.checkerPattern];
        });
        
        self.backgroundColorCheckerPatternView = [UIView new];
        self.backgroundColorCheckerPatternView.clipsToBounds = YES;
        self.backgroundColorCheckerPatternView.layer.borderColor = FLEXColor.tertiaryBackgroundColor.CGColor;
        self.backgroundColorCheckerPatternView.layer.borderWidth = 2.f / UIScreen.mainScreen.scale;
        self.backgroundColorCheckerPatternView.backgroundColor = checkerPatternColor;
        [self.contentView addSubview:self.backgroundColorCheckerPatternView];
        self.viewBackgroundColorView = [UIView new];
        [self.backgroundColorCheckerPatternView addSubview:self.viewBackgroundColorView];
    }
    return self;
}

- (void)setHighlighted:(BOOL)highlighted animated:(BOOL)animated {
    UIColor *originalColour = self.viewBackgroundColorView.backgroundColor;
    [super setHighlighted:highlighted animated:animated];
    
    // UITableViewCell changes all subviews in the contentView to backgroundColor = clearColor.
    // We want to preserve the hierarchy background color when highlighted.
    self.depthIndicatorView.backgroundColor = FLEXUtility.hierarchyIndentPatternColor;
    
    self.viewBackgroundColorView.backgroundColor = originalColour;
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    UIColor *originalColour = self.viewBackgroundColorView.backgroundColor;
    [super setSelected:selected animated:animated];
    
    // See setHighlighted above.
    self.depthIndicatorView.backgroundColor = FLEXUtility.hierarchyIndentPatternColor;
    
    self.viewBackgroundColorView.backgroundColor = originalColour;
}

- (void)layoutSubviews {
    [super layoutSubviews];
    
    const CGFloat kContentPadding = 6;
    const CGFloat kDepthIndicatorWidthMultiplier = 4;
    const CGFloat kViewColorIndicatorSize = 22;
    
    const CGRect bounds = self.contentView.bounds;
    const CGFloat centerY = CGRectGetMidY(bounds);
    const CGFloat textLabelCenterY = CGRectGetMidY(self.textLabel.frame);
    
    BOOL hideCheckerView = self.backgroundColorCheckerPatternView.hidden;
    CGFloat maxWidth = CGRectGetMaxX(bounds);
    maxWidth -= (hideCheckerView ? kContentPadding : (kViewColorIndicatorSize + kContentPadding * 2));
    
    CGRect depthIndicatorFrame = self.depthIndicatorView.frame = CGRectMake(
        kContentPadding, 0, self.viewDepth * kDepthIndicatorWidthMultiplier, CGRectGetHeight(bounds)
    );
    
    // Circle goes after depth, and its center Y = textLabel's center Y
    CGRect circleFrame = self.colorCircleImageView.frame;
    circleFrame.origin.x = CGRectGetMaxX(depthIndicatorFrame) + kContentPadding;
    circleFrame.origin.y = FLEXFloor(textLabelCenterY - CGRectGetHeight(circleFrame) / 2.f);
    self.colorCircleImageView.frame = circleFrame;
    
    // Text label goes after random color circle, width extends to the edge
    // of the contentView or to the padding before the color indicator view
    CGRect textLabelFrame = self.textLabel.frame;
    CGFloat textOriginX = CGRectGetMaxX(circleFrame) + kContentPadding;
    textLabelFrame.origin.x = textOriginX;
    textLabelFrame.size.width = maxWidth - textOriginX;
    self.textLabel.frame = textLabelFrame;
    
    // detailTextLabel leading edge lines up with the circle, and the
    // width extends to the same max X as the same max X as the textLabel
    CGRect detailTextLabelFrame = self.detailTextLabel.frame;
    CGFloat detailOriginX = circleFrame.origin.x;
    detailTextLabelFrame.origin.x = detailOriginX;
    detailTextLabelFrame.size.width = maxWidth - detailOriginX;
    self.detailTextLabel.frame = detailTextLabelFrame;
    
    // Checker pattern view starts after the padding after the max X of textLabel,
    // and is centered vertically within the entire contentView
    self.backgroundColorCheckerPatternView.frame = CGRectMake(
        CGRectGetMaxX(self.textLabel.frame) + kContentPadding,
        centerY - kViewColorIndicatorSize / 2.f,
        kViewColorIndicatorSize,
        kViewColorIndicatorSize
    );
    
    // Background color view fills it's superview
    self.viewBackgroundColorView.frame = self.backgroundColorCheckerPatternView.bounds;
    self.backgroundColorCheckerPatternView.layer.cornerRadius = kViewColorIndicatorSize / 2.f;
}

- (void)setRandomColorTag:(UIColor *)randomColorTag {
    if (![_randomColorTag isEqual:randomColorTag]) {
        _randomColorTag = randomColorTag;
        self.colorCircleImageView.image = [FLEXUtility circularImageWithColor:randomColorTag radius:6];
    }
}

- (void)setViewDepth:(NSInteger)viewDepth {
    if (_viewDepth != viewDepth) {
        _viewDepth = viewDepth;
        [self setNeedsLayout];
    }
}

- (UIColor *)indicatedViewColor {
    return self.viewBackgroundColorView.backgroundColor;
}

- (void)setIndicatedViewColor:(UIColor *)color {
    self.viewBackgroundColorView.backgroundColor = color;
    
    // Hide the checker pattern view if there is no background color
    self.backgroundColorCheckerPatternView.hidden = color == nil;
    [self setNeedsLayout];
}

@end