import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
import { Property, TypeDefinitionByName } from '@0xproject/types';
import * as React from 'react';

import { DocsInfo } from '../docs_info';
import { constants } from '../utils/constants';

import { Comment } from './comment';
import { SourceLink } from './source_link';
import { Type } from './type';

export interface PropertyBlockProps {
    property: Property;
    sectionName: string;
    docsInfo: DocsInfo;
    sourceUrl: string;
    selectedVersion: string;
    typeDefinitionByName: TypeDefinitionByName;
}

export interface PropertyBlockState {
    shouldShowAnchor: boolean;
}

export class PropertyBlock extends React.Component<PropertyBlockProps, PropertyBlockState> {
    constructor(props: PropertyBlockProps) {
        super(props);
        this.state = {
            shouldShowAnchor: false,
        };
    }
    public render(): React.ReactNode {
        const property = this.props.property;
        const sectionName = this.props.sectionName;
        return (
            <div
                id={`${this.props.sectionName}-${property.name}`}
                className="pb4 pt2"
                key={`property-${property.name}-${property.type.name}`}
                onMouseOver={this._setAnchorVisibility.bind(this, true)}
                onMouseOut={this._setAnchorVisibility.bind(this, false)}
            >
                <div className="pb2" style={{ lineHeight: 1.3 }}>
                    <AnchorTitle
                        headerSize={HeaderSizes.H3}
                        title={property.name}
                        id={`${sectionName}-${property.name}`}
                        shouldShowAnchor={this.state.shouldShowAnchor}
                    />
                </div>
                <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
                    {(property as any).callPath}
                    {property.name}:{' '}
                    <Type
                        type={property.type}
                        sectionName={sectionName}
                        docsInfo={this.props.docsInfo}
                        typeDefinitionByName={this.props.typeDefinitionByName}
                        isInPopover={false}
                    />
                </code>
                {property.source && (
                    <SourceLink
                        version={this.props.selectedVersion}
                        source={property.source}
                        sourceUrl={this.props.sourceUrl}
                    />
                )}
                {property.comment && <Comment comment={property.comment} className="py2" />}
            </div>
        );
    }
    private _setAnchorVisibility(shouldShowAnchor: boolean): void {
        this.setState({
            shouldShowAnchor,
        });
    }
}
m_and_yarn/devel/electron4/files/serve-10.1.2</option>
<option value='dependabot/npm_and_yarn/devel/electron4/files/y18n-3.2.2'>dependabot/npm_and_yarn/devel/electron4/files/y18n-3.2.2</option>
<option value='dependabot/npm_and_yarn/devel/electron6/files/elliptic-6.5.3'>dependabot/npm_and_yarn/devel/electron6/files/elliptic-6.5.3</option>
<option value='dependabot/npm_and_yarn/devel/electron6/files/elliptic-6.5.4'>dependabot/npm_and_yarn/devel/electron6/files/elliptic-6.5.4</option>
<option value='dependabot/npm_and_yarn/devel/electron6/files/ini-1.3.8'>dependabot/npm_and_yarn/devel/electron6/files/ini-1.3.8</option>
<option value='dependabot/npm_and_yarn/devel/electron6/files/lodash-4.17.19'>dependabot/npm_and_yarn/devel/electron6/files/lodash-4.17.19</option>
<option value='dependabot/npm_and_yarn/devel/electron6/files/lodash.merge-4.6.2'>dependabot/npm_and_yarn/devel/electron6/files/lodash.merge-4.6.2</option>
<option value='dependabot/npm_and_yarn/devel/electron6/files/node-fetch-2.6.1'>dependabot/npm_and_yarn/devel/electron6/files/node-fetch-2.6.1</option>
<option value='dependabot/npm_and_yarn/devel/electron6/files/serve-10.1.2'>dependabot/npm_and_yarn/devel/electron6/files/serve-10.1.2</option>
<option value='gnome-3.22'>gnome-3.22</option>
<option value='gnome-3.24'>gnome-3.24</option>
<option value='gnome-3.26'>gnome-3.26</option>
<option value='gnome-3.28'>gnome-3.28</option>
<option value='gnome-3.32'>gnome-3.32</option>
<option value='gnome-3.36'>gnome-3.36</option>
<option value='gstreamer'>gstreamer</option>
<option value='gstreamer-1.16'>gstreamer-1.16</option>
<option value='gstreamer0.10-removal'>gstreamer0.10-removal</option>
<option value='main' selected='selected'>main</option>
<option value='master'>master</option>
<option value='mate-1.16'>mate-1.16</option>
<option value='mate-1.18'>mate-1.18</option>
<option value='mate-1.20'>mate-1.20</option>
<option value='mate-1.22'>mate-1.22</option>
</select> <input type='submit' value='switch'/></form></td></tr>
<tr><td class='sub'>FreeBSD GNOME current development ports (https://github.com/freebsd/freebsd-ports-gnome)</td><td class='sub right'></td></tr></table>
<table class='tabs'><tr><td>
<a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/about/'>about</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/'>summary</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/refs/?id=48aea4f92fb6e9715761c8a856baad4da0f989ec'>refs</a><a class='active' href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/log/net/gkrellmwireless2'>log</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/tree/net/gkrellmwireless2?id=48aea4f92fb6e9715761c8a856baad4da0f989ec'>tree</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/commit/net/gkrellmwireless2?id=48aea4f92fb6e9715761c8a856baad4da0f989ec'>commit</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/diff/net/gkrellmwireless2?id=48aea4f92fb6e9715761c8a856baad4da0f989ec'>diff</a><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/stats/net/gkrellmwireless2'>stats</a></td><td class='form'><form class='right' method='get' action='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/log/net/gkrellmwireless2'>
<input type='hidden' name='id' value='48aea4f92fb6e9715761c8a856baad4da0f989ec'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/log/?id=48aea4f92fb6e9715761c8a856baad4da0f989ec'>root</a>/<a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/log/net?id=48aea4f92fb6e9715761c8a856baad4da0f989ec'>net</a>/<a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/log/net/gkrellmwireless2?id=48aea4f92fb6e9715761c8a856baad4da0f989ec'>gkrellmwireless2</a></div><div class='content'><table class='list nowrap'><tr class='nohover'><th></th><th class='left'>Commit message (<a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/log/net/gkrellmwireless2?id=48aea4f92fb6e9715761c8a856baad4da0f989ec&amp;showmsg=1'>Expand</a>)</th><th class='left'>Author</th><th class='left'>Age</th><th class='left'>Files</th><th class='left'>Lines</th></tr>
<tr><td class='commitgraph'>* </td><td><a href='/~lantw44/cgit/cgit.cgi/freebsd-ports-gnome/commit/net/gkrellmwireless2?id=d6ff3c7a4fdd514f2316280812c15b1fd6addc09'>Stagify.</a></td><td>Vanilla I. Shu</td><td><span title='2014-06-23 16:32:49 +0800'>2014-06-23</span>