import { BasedFinder } from './index.js'
import { useToast } from '../Toast/index.js'
import { Button } from '../Button/index.js'
import { colors } from '../../utils/colors.js'
import { Modal } from '../Modal/index.js'
import { IconButton } from '../IconButton/index.js'
import { Sidebar } from '../Sidebar/index.js'
import { Fields } from '../../utils/common.js'

export const FullPage = () => {
  const toast = useToast()

  return (
    <div
      style={{
        height: '100svh',
        display: 'flex',
      }}
    >
      {/* <div /> */}
      <Sidebar value="articles" onChange={() => {}}>
        <Sidebar.Header>
          <svg fill="none" viewBox="0 0 80 80" width="40" height="40">
            <path
              d="m60.822 26.3984-19.0829 19.0829h-19.0829l19.0829-19.0829z"
              fill="#4b41ff"
            ></path>
            <path
              d="m65.3125 45.481-19.0829 19.0828h-23.5734l19.0829-19.0828z"
              fill="#ff1f85"
            ></path>
            <path
              d="m41.7391 8.4375-19.0829 19.0829v17.9606l19.0829-19.0829z"
              fill="#008cff"
            ></path>
          </svg>
        </Sidebar.Header>
        <Sidebar.Items>
          <Sidebar.Group title="Content management">
            <Sidebar.Item value="articles" icon="columns">
              Articles
            </Sidebar.Item>
            <Sidebar.Item value="media" icon="image">
              Media library
            </Sidebar.Item>
          </Sidebar.Group>
        </Sidebar.Items>
      </Sidebar>
      <BasedFinder
        endpoints={{
          query: 'get-demo-data',
          schema: 'get-demo-schema',
          totalQuery: 'get-demo-total',
        }}
        defaultView="calendar"
        type="article"
        transformFields={(fields) => {
          fields['publishedAt'].calendar = { type: 'start' }
          delete fields['createdAt']
          delete fields['updatedAt']

          const desiredOrder = [
            'image',
            'title',
            'authors',
            'format',
            'paid',
            'keywords',
            'publishedAt',
          ]

          const res: Fields = {}

          for (const k of desiredOrder) {
            res[k] = fields[k]
          }

          return res
        }}
        onItemClick={(item) => {
          toast(`clicked item ${item.id}`)
        }}
        itemActions={[
          {
            label: 'Delete',
            color: 'red',
            icon: 'delete',
            onClick: (item) => toast(`delete ${item.id}`),
          },
        ]}
        bulkActions={[
          {
            label: 'Delete',
            color: 'red',
            icon: 'delete',
            onClick: (selected) => toast(`delete ${selected.length}`),
          },
        ]}
      >
        <div style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
          <div
            style={{
              flexShrink: 0,
              width: '100%',
              height: 64,
              padding: '0 20px',
              display: 'flex',
              alignItems: 'center',
              zIndex: 3,
              background: colors.neutralInverted100,
              boxShadow: `inset 0 -1px 0 0 ${colors.neutral20Adjusted}`,
            }}
          >
            <BasedFinder.Header
              title="Select articles"
              trailButton={<Button leadIcon="add">Add article</Button>}
            />
          </div>
          <div
            style={{
              height: 'calc(100% - 64px)',
              width: '100%',
            }}
          >
            <BasedFinder.Body />
          </div>
        </div>
      </BasedFinder>
    </div>
  )
}

export const InsideModal = () => {
  const toast = useToast()

  return (
    <Modal open onOpenChange={() => {}} size="large">
      <BasedFinder
        endpoints={{
          query: 'get-data',
          schema: 'get-schema',
          totalQuery: 'get-total',
        }}
        type="user"
        transformFields={(fields) => {
          fields['timestamp'].calendar = { type: 'start' }
          delete fields['start']
          delete fields['end']

          return fields
        }}
        itemActions={[
          {
            label: 'Delete',
            color: 'red',
            icon: 'delete',
            onClick: (item) => toast(`delete ${item.id}`),
          },
        ]}
        bulkActions={[
          {
            label: 'Delete',
            color: 'red',
            icon: 'delete',
            onClick: (selected) => toast(`delete ${selected.length}`),
          },
        ]}
      >
        {({ view }) => (
          <>
            <Modal.Header>
              <BasedFinder.Header
                title="Select articles"
                trailButton={<IconButton icon="close" />}
              />
            </Modal.Header>
            <Modal.Body>
              <div
                style={{
                  height: 'calc(100svh - 2*24px - 2*84px)',
                  borderRadius: 16,
                  ...(view !== 'calendar' && {
                    border: `1px solid ${colors.neutral20Adjusted}`,
                    overflow: 'hidden',
                  }),
                }}
              >
                <BasedFinder.Body
                  tableHeaderTransparentBackground={false}
                  calendarPadding={false}
                />
              </div>
            </Modal.Body>
            <Modal.Actions>
              {({ close }) => (
                <>
                  <Button keyHint="Esc" variant="border" onClick={close}>
                    Cancel
                  </Button>
                  <Button
                    keyHint="Enter"
                    onClick={async () => {
                      await new Promise((resolve) => {
                        setTimeout(() => {
                          resolve('foo')
                        }, 2000)
                      })
                      close()
                    }}
                  >
                    Save
                  </Button>
                </>
              )}
            </Modal.Actions>
          </>
        )}
      </BasedFinder>
    </Modal>
  )
}
