import React from 'react';

import { NAMESPACE_CONFIG, Namespace, Rule } from '../../config';
import { parseDescription, t } from '../utils';

interface RuleTableProps {
  namespace: Namespace;
  hideOff: boolean;
}

export const RuleTable: React.FC<RuleTableProps> = ({ namespace, hideOff }) => {
  return (
    <div className="container-fluid">
      <div className="flex-left flex-wrap units-gap hide-on-mobile">
        <h3 className="unit-1-3 unit-1-on-mobile site-table-header-text">{t('规则说明')}</h3>
        <h3 className="unit-1-3 unit-1-on-mobile text-danger site-table-header-text">{t('错误的示例')}</h3>
        <h3 className="unit-1-3 unit-1-on-mobile text-success site-table-header-text">{t('正确的示例')}</h3>
      </div>
      {Object.values<Rule>(NAMESPACE_CONFIG[namespace].ruleConfig).map(
        ({
          name,
          value,
          description,
          reason,
          badExample,
          goodExample,
          fixable,
          extendsBaseRule,
          requiresTypeChecking,
        }) => (
          <div
            id={name}
            key={name}
            className={`flex-left flex-wrap top-gap-big units-gap site-row ${
              value === 'off' ? 'site-row-off site-row-wide' : ''
            }`}
            style={
              value === 'off' && hideOff
                ? {
                    display: 'none',
                  }
                : {}
            }
          >
            <div className="unit-1-3 unit-1-on-mobile site-desc">
              <a href={NAMESPACE_CONFIG[namespace].getDocsUrl(name)}>{name}</a>
              &nbsp;&nbsp;
              <span data-tip={t('可使用 --fix 自动修复')} data-type="success">
                {fixable && '🔧'}
              </span>
              <span data-tip={t('需要类型信息')} data-type="warning">
                {requiresTypeChecking && '💭'}
              </span>
              <a data-tip={t('继承自 ') + extendsBaseRule} data-type="warning" href={`?rule=base#${extendsBaseRule}`}>
                {extendsBaseRule && '👀'}
              </a>
              <a className="site-anchor" href={`#${name}`}>
                #
              </a>
              <p
                className="top-gap-0"
                dangerouslySetInnerHTML={{
                  __html: parseDescription(t(description)),
                }}
              />
              {reason && (
                <p
                  className="text-muted text-small"
                  style={{ marginTop: 5 }}
                  dangerouslySetInnerHTML={{
                    __html: parseDescription(reason),
                  }}
                />
              )}
              {Array.isArray(value) && (
                <div className="text-muted text-small site-rule-value">
                  {t('配置：')}
                  {typeof value[1] === 'object' ? (
                    <pre>
                      <code>{`["error", ${JSON.stringify(value[1], null, 4)}]`}</code>
                    </pre>
                  ) : (
                    <code>{`["error", ${JSON.stringify(value[1])}]`}</code>
                  )}
                </div>
              )}
            </div>
            <div className="unit-1-3 unit-1-on-mobile">
              {badExample && (
                <pre className={`language-${NAMESPACE_CONFIG[namespace].prismLanguage} site-code`}>
                  <code
                    dangerouslySetInnerHTML={{
                      __html: badExample,
                    }}
                  />
                </pre>
              )}
            </div>
            <div className="unit-1-3 unit-1-on-mobile">
              {goodExample && (
                <pre className={`language-${NAMESPACE_CONFIG[namespace].prismLanguage}  site-code`}>
                  <code
                    dangerouslySetInnerHTML={{
                      __html: goodExample,
                    }}
                  />
                </pre>
              )}
            </div>
          </div>
        ),
      )}
    </div>
  );
};