import { Badge } from '@components/ui/Badge';

export const StyleInspectorClasses = (props: any) => {
  const { attributes } = props;
  const biteClasses: string[] = (attributes.biteClass || '')
    .split(' ')
    .filter((entry: string) => /\S/.test(entry));
  const flexClasses: string[] = (attributes.flexClass || '')
    .split(' ')
    .filter((entry: string) => /\S/.test(entry));
  const mediaClasses: string[] = (attributes.mediaClass || '')
    .split(' ')
    .filter((entry: string) => /\S/.test(entry));
  const hasMultipleClassTypes =
    [
      biteClasses.length > 0,
      flexClasses.length > 0,
      mediaClasses.length > 0,
    ].filter((entry) => entry).length > 1;

  return biteClasses.length ? (
    <>
      <div className="w-60 overflow-auto px-4 pb-1">
        <ul role="list" className="divide-gray-light divide-y">
          {!!biteClasses.length && (
            <li className="mb-0 py-3">
              {hasMultipleClassTypes && (
                <div className="mb-2.5 text-[10px] font-medium uppercase opacity-50">
                  Style
                </div>
              )}
              <div className="flex flex-row flex-wrap items-center gap-2.5">
                {biteClasses.map((c: string, i: number) => (
                  <Badge key={`biteClass_${i}`} className="text-nowrap">
                    {c}
                  </Badge>
                ))}
              </div>
            </li>
          )}

          {!!flexClasses.length && (
            <li className="mb-0 py-3">
              {hasMultipleClassTypes && (
                <div className="mb-2.5 text-[10px] font-medium uppercase opacity-50">
                  Layout
                </div>
              )}
              <div className="flex flex-row flex-wrap items-center gap-2.5">
                {flexClasses.map((c: string, i: number) => (
                  <Badge key={`flexClass_${i}`} className="text-nowrap">
                    {c}
                  </Badge>
                ))}
              </div>
            </li>
          )}

          {!!mediaClasses.length && (
            <li className="mb-0 py-3">
              {hasMultipleClassTypes && (
                <div className="mb-2.5 text-[10px] font-medium uppercase opacity-50">
                  Visual
                </div>
              )}
              <div className="flex flex-row flex-wrap items-center gap-2.5">
                {mediaClasses.map((c: string, i: number) => (
                  <Badge key={`mediaClass_${i}`} className="text-nowrap">
                    {c}
                  </Badge>
                ))}
              </div>
            </li>
          )}
        </ul>
      </div>
    </>
  ) : (
    <div className="w-64 px-4 pb-4 pt-4">
      No Blockbite styles for this block.
    </div>
  );
};