import Card from '../index';
import React from 'react';
import ReactDOM from 'react-dom';
import { Box } from '../..';

const commonProps = {
  title: 'Title',
  style: { width: 300 },
  subTitle: 'Sub-title',
  extra: <a href="#111">
    <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1">
      <g id="37.-✅-Card-卡片-⭐️" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Card-卡片" transform="translate(-790.000000, -798.000000)">
          <rect fill="#FFFFFF" x="0" y="0" width="1200" height="7472"></rect>
          <g id="类型" transform="translate(90.000000, 319.000000)">
            <g id="编组备份-2" transform="translate(424.000000, 455.000000)">
              <g id="Icon-/-Outlined-/-Controls-/-Settings-/-16" transform="translate(276.000000, 24.000000)">
                <rect id="矩形" fill-opacity="0.01" fill="#FFFFFF" x="0" y="0" width="20" height="20"></rect>
                <path d="M15.359782,2.89102851 C16.2245521,3.39030378 16.541147,4.47442029 16.0983735,5.35538452 L16.0460408,5.45239338 L15.5855584,6.24974349 C15.4129323,6.54865493 15.5153067,6.93091166 15.8142182,7.10353778 C15.8854608,7.14468152 15.9638837,7.1712192 16.0449192,7.1819261 L16.1266565,7.18731072 L17.0478832,7.18750079 C18.045064,7.18750079 18.8604315,7.96593574 18.9194613,8.94828102 L18.9228832,9.06250079 L18.9228832,10.9375008 C18.9228832,11.9346816 18.1444482,12.7500492 17.1620269,12.8090789 L17.047798,12.8125008 L16.1270487,12.8123753 C15.7818708,12.8123283 15.5020106,13.0921122 15.5019636,13.4372902 C15.5019524,13.5195605 15.5181808,13.6007464 15.5494256,13.6762795 L15.5856307,13.7497592 L16.0460796,14.5476754 C16.54467,15.4112593 16.2782093,16.5066059 15.4569882,17.0488997 L15.359782,17.1089731 L13.7359843,18.0464731 C12.8724004,18.5450635 11.7770539,18.2786028 11.2347687,17.4573967 L11.1746964,17.3601922 L10.7140569,16.5623981 C10.5414586,16.2634706 10.1592115,16.1610604 9.86028392,16.3336586 C9.78901335,16.3748097 9.72681039,16.4294896 9.67702208,16.494351 L9.63149597,16.5624821 L9.17107961,17.3601754 C8.67180433,18.2249456 7.58768782,18.5415405 6.70678389,18.0988018 L6.60978197,18.0464731 L4.98598434,17.1089731 C4.1212142,16.6096978 3.80461928,15.5255813 4.24732316,14.6447376 L4.2996479,14.5477427 L4.76018068,13.7498476 C4.93273253,13.4508933 4.83026308,13.068662 4.53130875,12.8961102 C4.46004889,12.8549801 4.38161101,12.8284608 4.3005645,12.817776 L4.21881767,12.8124149 L3.29788316,12.8125008 C2.30070236,12.8125008 1.48533479,12.0340658 1.42630506,11.0517206 L1.42288316,10.9375008 L1.42288316,9.06250079 C1.42288316,8.06531999 2.20131811,7.24995242 3.18357218,7.1909227 L3.29778102,7.1875008 L4.21879998,7.18735029 C4.56397794,7.18729388 4.84375424,6.90742612 4.84369784,6.56224816 C4.8436844,6.4800173 4.82744724,6.39887424 4.79620862,6.32338047 L4.76001478,6.24993875 L4.29968671,5.45232614 C3.80109631,4.58874223 4.06755697,3.49339573 4.88877807,2.95110185 L4.98598434,2.89102851 L6.60978197,1.95352851 C7.47336588,1.45493811 8.56871239,1.72139876 9.11098335,2.54258019 L9.17105395,2.6397817 L9.63162053,3.43735519 C9.80423406,3.73627391 10.1864865,3.83866449 10.4854052,3.66605097 C10.5566324,3.62492011 10.6188024,3.57027611 10.6685734,3.50546045 L10.7140878,3.437378 L11.1746867,2.63982614 C11.673962,1.77505599 12.7580785,1.45846107 13.6389824,1.90119976 L13.7359843,1.95352851 L15.359782,2.89102851 Z M14.734782,3.97356026 L13.1109843,3.03606026 C12.8334038,2.87579906 12.4839887,2.95266466 12.297273,3.20385936 L12.2571796,3.26489338 L11.7965419,4.06251249 C11.6320065,4.34741444 11.395403,4.58400799 11.1104941,4.74853141 C10.2469511,5.2471927 9.15158271,4.98082198 8.60922141,4.1596454 L8.54914009,4.06244406 L8.08854785,3.26482614 C7.92828665,2.9872456 7.58725148,2.87910559 7.30000743,3.00325765 L7.23478197,3.03606026 L5.61098434,3.97356026 C5.3334038,4.13382146 5.2252638,4.47485663 5.34945674,4.76217151 L5.38226953,4.82741459 L5.84264866,5.62511566 C6.00706382,5.90999859 6.09364407,6.23312046 6.09369782,6.56204389 C6.09386078,7.55922467 5.31555908,8.37471945 4.33322346,8.4339097 L4.21900425,8.43735027 L3.29788316,8.43750079 C2.97736076,8.43750079 2.71319118,8.67877591 2.67708799,8.98961259 L2.67288316,9.06250079 L2.67288316,10.9375008 C2.67288316,11.2580232 2.91415828,11.5221928 3.22494826,11.558296 L3.29782484,11.5625008 L4.21870104,11.5624149 C4.54781262,11.5623842 4.87113484,11.6489804 5.15617428,11.8135008 C6.02100643,12.3126686 6.33773602,13.3967458 5.89510676,14.2777047 L5.84279006,14.3747131 L5.38221847,15.1726754 C5.22195727,15.450256 5.29882286,15.7996711 5.54996372,15.9863557 L5.61098434,16.0264413 L7.23478197,16.9639413 C7.51236252,17.1242025 7.86177764,17.0473369 8.04843118,16.7962499 L8.08850904,16.7352427 L8.54888658,15.9376166 C8.71344645,15.6525087 8.95016815,15.4157503 9.23525045,15.2511462 C10.0988189,14.7525291 11.1941737,15.0189559 11.736493,15.8401602 L11.7965693,15.9373647 L12.2572185,16.7351754 C12.4174797,17.012756 12.7585148,17.120896 13.0457589,16.9967439 L13.1109843,16.9639413 L14.734782,16.0264413 C15.0123625,15.8661801 15.1205025,15.5251449 14.9962968,15.2378079 L14.9634808,15.1725593 L14.5029649,14.3745269 C14.3384853,14.0894987 14.2519187,13.7662013 14.2519636,13.4371198 C14.2520995,12.439939 15.0306455,11.6246775 16.0129988,11.5657817 L16.1272191,11.5623753 L17.0478832,11.5625008 C17.3684056,11.5625008 17.6325751,11.3212257 17.6686783,11.010389 L17.6728832,10.9375008 L17.6728832,9.06250079 C17.6728832,8.74197839 17.431608,8.47780881 17.1206681,8.44170561 L17.0477542,8.43750078 L16.1263986,8.4373107 C15.7973195,8.43724281 15.4740541,8.35056682 15.1890837,8.18599188 C14.3243756,7.68660916 14.0079154,6.60245333 14.4507635,5.72160441 L14.5031043,5.624609 L14.9635479,4.82732614 C15.1238091,4.5497456 15.0469435,4.20033047 14.7958026,4.01364585 L14.734782,3.97356026 Z M11.8562947,7.36347972 C13.5004256,8.31271913 14.0637464,10.4150611 13.114507,12.059192 C12.1652676,13.7033229 10.0629256,14.2666438 8.41879471,13.3174044 C6.77466381,12.368165 6.21134297,10.2658229 7.16058238,8.62169204 C8.1098218,6.97756115 10.2121638,6.4142403 11.8562947,7.36347972 Z M11.2312947,8.44601147 C10.1850296,7.84195003 8.84717558,8.20042693 8.24311414,9.24669204 C7.63905269,10.2929572 7.99752959,11.6308112 9.04379471,12.2348726 C10.0900598,12.8389341 11.4279138,12.4804572 12.0319753,11.434192 C12.6360367,10.3879269 12.2775598,9.05007292 11.2312947,8.44601147 Z" id="形状" fill="#737373"></path>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg></a>,
};

ReactDOM.render(<Box direction="row" spacing={20}>
  <Card free style={{ width: 300 }}>
    <Card.Header title="Simple Card" {...commonProps} />

    <Card.Content>
            Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent quo.
    </Card.Content>

    <Card.Actions
      btnActions={[ 'ok' ]}
      onOk={() => console.log('123')}
      onCancel={() => console.log('234')}
    >
    </Card.Actions>
  </Card>

  <Card free style={{ width: 300 }}>
    <Card.Header title="Simple Card" {...commonProps} />

    <Card.Content>
            Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent quo.
    </Card.Content>

    <Card.Actions
      socialActions
    >

    </Card.Actions>
  </Card>
</Box>, document.getElementById('card-demo-2'));
