import React, { useMemo } from 'react';
import { RuleBar } from '../../Segment/RuleBar';

import classnames from 'classnames';
import Skeleton from 'react-loading-skeleton';

import "./SegmentRuleSkeleton.scss";
import { Icon } from '@komi-app/components';

export interface SegmentRuleSkeletonProps {
  buttonName: string;
}
export const SegmentRuleSkeleton: React.FC<SegmentRuleSkeletonProps> = ({
  buttonName,
}) => {
  const classNames = classnames("segment-rule__skeleton");

  const smallPill = useMemo(
    () => <Skeleton width="62px" height="40px" className="segment-rule__skeleton-pill-small" />,
    [],
  );
  const largePill = useMemo(
    () => <Skeleton width="176px" height="40px" className="segment-rule__skeleton-pill-large" />,
    [],
  );

  return (
    <div className={classNames} data-testid="segment-rule-skeleton">
      <div className="segment-rule__skeleton-body">
        <div className="segment-rule__skeleton-body-prefix">
          <div className="segment-rule__skeleton-body-row">
            {smallPill}
          </div>
          <div className="segment-rule__skeleton-body-row">
            <RuleBar className="segment-rule__skeleton-bar" />
          </div>
        </div>
        <div className="segment-rule__skeleton-body-suffix">
          <div className="segment-rule__skeleton-body-row">
            {smallPill}
            {largePill}
            {largePill}
            {largePill}
          </div>
          <div className="segment-rule__skeleton-body-row">
            {smallPill}
            {largePill}
            {smallPill}
            {largePill}
          </div>
        </div>
      </div>

      <div className="segment-rule__skeleton-append-button" data-testid="add-button">
        <div className="segment-rule__skeleton-append-button-icon">
          <Icon name="addFilled" fill="#0F69E6" />
        </div>
        <p className="segment-rule__skeleton-append-button-label">
          Add {buttonName}
        </p>
      </div>
    </div>
  );
};
