"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
 * @file @todo this needs splitting up & moving into ArrowIcon
 */
const react_1 = __importDefault(require("react"));
const deps_1 = require("./deps");
class AnimatedArrowIcon extends react_1.default.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            paths: {
                up: '7.5 5.37 13.4 0 15 2.1 7.5 9 0 2.1 1.63 0.04',
                down: '7.48468018 0 14.9693604 6.89398193 13.386673 8.99369812 7.48468018 3.62214661 1.61653912 8.94146471 0 6.89398193',
            },
        };
        // empty version
        this.dom = {
            beginElement() {
                console.warn('had no ref');
            },
        };
        this.setAnimationRef = node => {
            this.dom = node;
        };
    }
    renderPath() {
        // opposite of animate
        const path = deps_1.isDown(this.props)
            ? this.state.paths.down
            : this.state.paths.up;
        return react_1.default.createElement("polygon", { id: this.props.id, fill: '#000', points: path });
    }
    renderAnimation() {
        // opposite of path
        const animateTo = deps_1.isDown(this.props)
            ? this.state.paths.up
            : this.state.paths.down;
        return (react_1.default.createElement("animate", { ref: this.setAnimationRef, to: animateTo, id: 'animate-' + this.props.id, href: '#' + this.props.id, fill: "freeze", begin: ".5s", attributeName: "points", dur: '500ms' }));
    }
    render() {
        const attributes = {
            title: 'click me!',
            width: '15px',
            height: '9px',
            viewBox: '0 0 15 9',
        };
        this.dom.beginElement();
        return (react_1.default.createElement("svg", Object.assign({}, attributes),
            this.renderPath(),
            this.renderAnimation()));
    }
}
AnimatedArrowIcon.defaultProps = {
    id: 'animated-arrow-icon',
    isUp: false,
    isDown: true,
};
exports.AnimatedArrowIcon = AnimatedArrowIcon;
exports.default = AnimatedArrowIcon;
//# sourceMappingURL=AnimatedArrowIcon.js.map