import * as React from 'react';

import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';
import {CanvasProvider} from '@workday/canvas-kit-react/common';
import {Box} from '@workday/canvas-kit-react/layout';
import {px2rem} from '@workday/canvas-kit-styling';

export interface Breadcrumb {
  id: string;
  link?: string;
  text: string;
}

export default () => {
  const [items] = React.useState<Breadcrumb[]>([
    {id: '1', text: 'תנ״ך', link: '/tanakh'},
    {id: '2', text: 'כתובים', link: '/ketuvim'},
    {id: '3', text: 'משלי', link: '/proverbs'},
    {id: '4', text: 'בני תורתי אל־תשכח ומצותי יצר לבך׃', link: '/chapter-3-verse-1'},
    {id: '5', text: 'כי אורך ימים ושנות חיים ושלום יוסיפו לך׃', link: '/chapter-3-verse-2'},
    {id: '7', text: 'ומצא־חן ושכל־טוב בעיני אלהים ואדם׃'},
  ]);

  return (
    <CanvasProvider dir="rtl">
      <Box cs={{maxWidth: px2rem(300)}}>
        <Breadcrumbs items={items} aria-label="Breadcrumbs">
          <Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}>
            {item =>
              item.link ? (
                <Breadcrumbs.Item>
                  <Breadcrumbs.Link maxWidth={100} href={item.link}>
                    {item.text}
                  </Breadcrumbs.Link>
                </Breadcrumbs.Item>
              ) : (
                <Breadcrumbs.CurrentItem>{item.text}</Breadcrumbs.CurrentItem>
              )
            }
          </Breadcrumbs.List>
          <Breadcrumbs.Menu.Popper>
            <Breadcrumbs.Menu.Card cs={{maxWidth: px2rem(300), maxHeight: px2rem(200)}}>
              <Breadcrumbs.Menu.List>
                {(item: Breadcrumb) => (
                  <Breadcrumbs.Menu.Item href={item.link}>{item.text}</Breadcrumbs.Menu.Item>
                )}
              </Breadcrumbs.Menu.List>
            </Breadcrumbs.Menu.Card>
          </Breadcrumbs.Menu.Popper>
        </Breadcrumbs>
      </Box>
    </CanvasProvider>
  );
};