import { Chevron } from 'shared/components/navigation/primary.js'
import { Ul, Li, Details, Summary, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'

const ConsoleLog = (props) => (
  <Li>
    <Details>
      <Summary>
        <SumDiv>
          <Deg />
          <span>console.log()</span>
        </SumDiv>
        <Chevron />
      </Summary>
      <Ul>
        {['designConfig', 'patternConfig', 'gist', 'draft', 'renderProps'].map((it) => (
          <Li key={it}>
            <SumButton
              onClick={() => {
                if (it === 'designConfig') return console.log(props.design.designConfig)
                if (it === 'patternConfig') return console.log(props.design.patternConfig)
                if (it === 'renderProps') return console.log(props.draft.getRenderProps())
                return console.log(props[it])
              }}
            >
              <SumDiv>
                <Deg />
                <span>{it}</span>
              </SumDiv>
            </SumButton>
          </Li>
        ))}
      </Ul>
    </Details>
  </Li>
)

export default ConsoleLog